[이벤트 리스너] 사용자와 코드 사이를 잇는 연결고리

728x90

이벤트 리스너(Event Listener) 

사용자의 클릭, 키보드 입력, 마우스 움직임 등 다양한 행동은 어떻게 코드와 연결될까요? 이때 등장하는 개념이 바로 이벤트 리스너(Event Listener)입니다. 이벤트 리스너는 말 그대로 어떤 이벤트가 발생했을 때 그에 반응하는 청취자 역할을 합니다. 이 글에서는 이벤트 리스너의 기본 개념부터 사용법, 실전 예제까지 차근히 살펴보며, 사용자와 코드 사이를 잇는 연결고리로서의 역할을 이해해봅시다.
 

---

1.  이벤트 리스너란?

이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 동작을 정의하는 함수를 등록하는 방법입니다. 쉽게 말해, 이벤트 리스너는 웹 페이지의 특정 요소에 귀를 기울이고 있다가, 사용자가 무언가를 하면 미리 정해진 동작을 수행하게 합니다.

핵심 개념 요약

용어	설명
Event	사용자의 상호작용 또는 시스템 발생 이벤트 (클릭, 키 입력 등)
Event Listener	특정 이벤트 발생 시 실행될 함수(동작)를 등록하는 인터페이스
Callback Function	이벤트 발생 시 호출되는 함수 (리스너에 전달됨)

기본 사용법

이벤트 리스너는 일반적으로 addEventListener 메서드를 통해 등록합니다.

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});

• 첫 번째 인자: 이벤트 타입 ("click", "keydown" 등)
• 두 번째 인자: 콜백 함수 (이벤트 발생 시 실행됨)

화살표 함수도 가능

button.addEventListener("click", () => {
  console.log("화살표 함수로 리스너 등록됨!");
});

removeEventListener로 연결 해제

이벤트 리스너는 상황에 따라 제거가 필요할 수 있습니다. 메모리 누수를 막고 불필요한 동작을 줄이기 위해 유용합니다.

function handleClick() {
  console.log("클릭됨!");
}

button.addEventListener("click", handleClick);

// 이후 이벤트 제거
button.removeEventListener("click", handleClick);

• 주의 : 익명 함수로 등록한 리스너는 removeEventListener로 제거할 수 없습니다.

 

---

2.  주요 이벤트 타입

이벤트 이름	설명	예시 상황
click	마우스 클릭	버튼 클릭, 이미지 확대 등
dblclick	더블 클릭	빠른 편집 모드 진입 등
keydown, keyup	키보드 누름 / 뗌	검색창에 입력 감지
input	input 요소 내용 변경	실시간 검색 필터
submit	폼 제출	유효성 검사 후 제출
mouseover, mouseout	마우스 올림/벗어남	툴팁, 강조 효과
scroll	스크롤 발생	무한 스크롤 구현 등

 

---

3.  고급 - 이벤트 객체(Event Object) 활용하기

콜백 함수는 자동으로 이벤트 객체를 전달받습니다. 이 객체를 활용하면 이벤트의 세부 정보를 다룰 수 있습니다.

document.addEventListener("keydown", function(event) {
  console.log("누른 키:", event.key);
  console.log("Alt키 눌렀는가?", event.altKey);
});

주요 속성들

• event.type : 이벤트 종류
• event.target : 이벤트가 발생한 요소
• event.key : 눌린 키 값
• event.preventDefault() : 기본 동작 막기 (예: form 제출 차단)

 

---

4.  팁 - 이벤트 위임(Event Delegation)

많은 요소에 리스너를 각각 붙이는 대신, 상위 요소에서 한 번만 감지하고 하위 요소의 이벤트를 처리하는 기법입니다.

document.getElementById("list").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("클릭된 항목:", event.target.textContent);
  }
});

• DOM 구조 변화에 유연함
• 성능 향상

 

---

5.  마무리

이벤트 리스너는 웹 애플리케이션의 반응성을 구성하는 핵심 메커니즘입니다. 클릭 하나, 키보드 입력 하나에 반응할 수 있는 앱을 만들기 위해 꼭 필요한 기술이며, 복잡한 사용자 흐름을 제어하는 데까지 확장됩니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - EventTarget.addEventListener()
• MDN Web Docs - EventTarget.removeEventListener()

블로그 글 :

[버블링과 캡처링] 자바스크립트의 이벤트가 흐르는 길

 

---