이벤트 위임(Event Delegation)을 JavaScript로 구현하는 방법

카테고리

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

서브카테고리

웹 개발

대상자

JavaScript 초보자 및 중급 개발자(기본 개념 정리 및 실무 적용 방법 제공)

핵심 요약

• 이벤트 위임은 이벤트 버블링(Event Bubbling)을 활용해 하위 요소에 대한 이벤트 핸들러를 상위 요소에 집중하는 기법
• 성능 향상 및 코드 간결화를 위해 반복적인 이벤트 리스너 추가/제거를 방지
• 실무 예시: 동적으로 생성되는 요소(예: document.querySelectorAll)에 이벤트를 효율적으로 연결

섹션별 세부 요약

1. 이벤트 위임이란?

• 이벤트 위임은 상위 요소에 이벤트 리스너를 등록해 하위 요소의 이벤트를 처리하는 방식
• 상위 요소(예: document, body)에 단일 이벤트 리스너를 추가해 하위 요소(예: button, div)의 이벤트를 처리 가능
• 코드 예시:

```javascript

document.addEventListener('click', function(event) {

if (event.target.matches('button')) {

console.log('Button clicked!');

}

});

```

2. 이벤트 버블링의 작동 원리

• 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 과정
• 이벤트 위임은 이 과정을 활용해 하위 요소의 이벤트를 상위에서 처리 가능
• 이벤트 전파 단계:

1. 캡처 단계(Event Capturing)
2. 타겟 단계(Event Targeting)
3. 버블링 단계(Event Bubbling)

3. 실무 적용 사례

• 동적으로 생성되는 요소(예: AJAX 로딩된 콘텐츠)에 이벤트를 추가할 때
• 다수의 유사한 요소(예: ul 안의 li)에 동일한 이벤트 처리 로직을 적용할 때
• 성능 최적화: 하나의 이벤트 리스너로 여러 요소 처리 가능

4. 이벤트 위임 구현 방법

• 상위 요소에 이벤트 리스너 등록: addEventListener 사용
• 이벤트 타겟 확인: event.target으로 이벤트가 발생한 요소 식별
• 조건문으로 이벤트 처리: matches() 또는 classList.contains()로 요소 구분
• 예시 코드:

```javascript

document.querySelector('#container').addEventListener('click', function(event) {

if (event.target.classList.contains('item')) {

event.target.style.backgroundColor = 'red';

}

});

```

결론

• 이벤트 위임은 성능 향상과 코드 유지보수성 향상에 유리하며, 동적 요소 처리에 필수적인 기법
• 하위 요소에 이벤트 리스너를 직접 추가하기보다 상위 요소에 집중해 구현하는 것이 권장
• event.target과 matches() 메서드 활용해 정확한 요소에 대한 이벤트 처리 가능