이벤트 리스너 이해하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *초보~중급 JavaScript 개발자**

- DOM 상호작용 구현을 배우는 개발자

- 이벤트 핸들링 최적화 기법을 학습하고자 하는 프론트엔드 개발자

- 난이도: 중간 (기본 문법 이해 후 학습 권장)

핵심 요약

• 이벤트 리스너는 addEventListener()를 통해 DOM 요소에 등록하여 사용자 행동(클릭, 키 입력 등)에 반응하는 함수
• event.target과 event.preventDefault() 같은 이벤트 객체 사용으로 상호작용 제어 가능
• 이벤트 위임(Event Delegation)을 통해 부모 요소에 리스너를 등록하여 다중 요소 관리 효율성 향상

섹션별 세부 요약

1. 이벤트 리스너 정의

• 이벤트 리스너는 특정 이벤트(예: 클릭) 발생 시 콜백 함수를 실행하는 함수
• addEventListener() 메서드 사용이 권장되며, HTML 내 onclick 속성 사용은 유지보수성 저하

2. 주요 이벤트 유형

• 마우스 이벤트: click, mouseover, mouseout, mousedown, mouseup
• 키보드 이벤트: keydown, keyup, keypress (비추천)
• 폼 이벤트: submit, input, focus, blur
• 문서 이벤트: load, DOMContentLoaded, resize

3. 이벤트 리스너 추가 및 제거

• addEventListener("이벤트명", 콜백함수)로 등록
• removeEventListener("이벤트명", 콜백함수)로 제거 (메모리 누수 방지)
• 예시:

```javascript

const button = document.querySelector("#myButton");

button.addEventListener("click", function() {

console.log("Button clicked!");

});

```

4. 이벤트 객체 활용

• 이벤트 발생 시 event.target을 통해 트리거 요소 접근 가능
• event.preventDefault()를 사용해 기본 동작(예: 폼 제출) 방지

5. 이벤트 위임 기법

• 부모 요소에 하나의 리스너를 등록하여 자식 요소의 이벤트를 처리
• 예시:

```javascript

document.querySelector("#list").addEventListener("click", (event) => {

if (event.target.matches("li")) {

console.log("List item clicked:", event.target.textContent);

}

});

```

결론

• addEventListener() 사용을 권장하고, HTML 내 이벤트 속성은 피해야 함
• 이벤트 위임을 통해 DOM 요소 수가 많을 때 성능 최적화
• 이벤트 객체(event)를 활용해 상호작용 제어 및 데이터 추출 가능
• 리스너 제거를 통해 메모리 누수 방지 및 코드 유지보수성 향상