이벤트 전파 이해하기: 버블링 vs 캡처링
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
JavaScript 개발자, DOM 이벤트 핸들링에 관심 있는 중급~고급 개발자
핵심 요약
- 이벤트 전파는 DOM에서 이벤트 핸들러가 실행되는 순서를 결정하는 두 가지 단계(캡처링, 버블링)로 구성
- 버블링(기본 동작): 이벤트가 발생한 요소부터 상위 요소로 전달 (예:
button
→div
→body
) - 캡처링:
addEventListener
의 세 번째 인자true
로 설정하여 상위 요소부터 하위 요소로 전달 - Propagation 제어:
event.stopPropagation()
/event.stopImmediatePropagation()
으로 이벤트 흐름 중단 가능
섹션별 세부 요약
1. 이벤트 전파 정의
- 이벤트 전파는 DOM 트리에서 이벤트가 발생한 요소에서 시작하여 상위/하위 요소로 전달되는 과정
- 두 가지 단계: 캡처링(상위 → 하위), 버블링(하위 → 상위)
2. 이벤트 버블링
- 기본 동작으로, 이벤트가 발생한 요소에서 상위 요소로 순차적으로 전달
- 예:
button
클릭 시parent
→child
→button
순서로 핸들러 실행 - 사용 사례: 부모 요소에서 자식 요소의 이벤트를 한 번에 처리 (이벤트 위임)
3. 이벤트 캡처링
- 상위 요소에서 하위 요소로 이벤트 전달 (캡처링 단계)
addEventListener("click", handler, true)
로 활성화- 사용 사례: 이벤트가 목표 요소에 도달하기 전에 조기 처리 (예: 링크 클릭 방지)
4. 버블링 vs 캡처링 선택 기준
- 버블링 사용 시:
- 부모 요소가 자식의 이벤트를 반응해야 할 때
- 모달 닫기 등 전역 이벤트 처리
- 캡처링 사용 시:
- 이벤트가 목표 요소에 도달하기 전에 중단해야 할 때
- 분석 도구나 고위치 DOM 리스너 구현
5. 이벤트 전파 중단
event.stopPropagation()
→ 이벤트 흐름 중단 (캡처링/버블링 모두)event.stopImmediatePropagation()
→ 동일 요소의 다른 핸들러 중단
결론
- 이벤트 전파는 DOM 기반 애플리케이션에서 이벤트 관리의 핵심이며, 버블링(기본)과 캡처링(명시적 설정)을 이해해야 효과적인 이벤트 위임과 제어가 가능
addEventListener
의 세 번째 인자true
로 캡처링 활성화,stopPropagation()
으로 흐름 중단- 실무 팁: 버블링은 재사용 가능한 컴포넌트 설계에 유리, 캡처링은 전역 이벤트 모니터링에 적합