🌱 기초 프론트엔드
이벤트 리스너(Event Listener)란?
쉽게 이해하기
초인종을 생각해보세요. 누군가 버튼을 누르면 '띵동' 소리가 나죠. 이벤트 리스너는 웹사이트의 초인종 같은 거예요. 버튼을 클릭하거나 키보드를 누르는 등의 행동을 감지하고, 그에 맞는 반응을 하도록 만들어줍니다.
핵심 정리
웹 페이지에서 사용자의 행동을 감지하고 반응하는 코드입니다.
자세히 알아보기
이벤트 리스너는 웹 페이지에서 상호작용을 가능하게 만드는 핵심 기능입니다. 사용자가 버튼을 클릭하거나, 폼에 입력하거나, 마우스를 움직이는 등의 '이벤트'가 발생했을 때 특정 동작을 실행하도록 설정하는 거예요.
예를 들어, '좋아요' 버튼을 클릭하면 하트 아이콘이 빨간색으로 바뀌고 숫자가 올라가는 것, 검색창에 글자를 입력하면 자동 완성이 뜨는 것 모두 이벤트 리스너가 작동한 결과입니다.
JavaScript에서는 `addEventListener` 메서드로 이벤트 리스너를 추가합니다. 어떤 요소에, 어떤 이벤트가 발생했을 때, 무엇을 실행할지 지정하는 거죠. 예를 들어 버튼 클릭 시 alert를 띄우려면 `button.addEventListener('click', function() { alert('클릭됨!'); })`처럼 작성합니다.
이벤트의 종류는 매우 다양해요. 클릭(click), 입력(input), 스크롤(scroll), 키보드 입력(keydown), 마우스 움직임(mousemove) 등 거의 모든 사용자 행동을 감지할 수 있습니다. 이를 통해 동적이고 반응하는 웹사이트를 만들 수 있어요.