이벤트 전파: 버블링 vs 캡처링 이해하기
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

이벤트 전파 이해하기: 버블링 vs 캡처링

카테고리

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

서브카테고리

웹 개발

대상자

JavaScript 개발자, DOM 이벤트 핸들링에 관심 있는 중급~고급 개발자

핵심 요약

  • 이벤트 전파는 DOM에서 이벤트 핸들러가 실행되는 순서를 결정하는 두 가지 단계(캡처링, 버블링)로 구성
  • 버블링(기본 동작): 이벤트가 발생한 요소부터 상위 요소로 전달 (예: buttondivbody)
  • 캡처링: addEventListener의 세 번째 인자 true로 설정하여 상위 요소부터 하위 요소로 전달
  • Propagation 제어: event.stopPropagation()/event.stopImmediatePropagation()으로 이벤트 흐름 중단 가능

섹션별 세부 요약

1. 이벤트 전파 정의

  • 이벤트 전파는 DOM 트리에서 이벤트가 발생한 요소에서 시작하여 상위/하위 요소로 전달되는 과정
  • 두 가지 단계: 캡처링(상위 → 하위), 버블링(하위 → 상위)

2. 이벤트 버블링

  • 기본 동작으로, 이벤트가 발생한 요소에서 상위 요소로 순차적으로 전달
  • 예: button 클릭 시 parentchildbutton 순서로 핸들러 실행
  • 사용 사례: 부모 요소에서 자식 요소의 이벤트를 한 번에 처리 (이벤트 위임)

3. 이벤트 캡처링

  • 상위 요소에서 하위 요소로 이벤트 전달 (캡처링 단계)
  • addEventListener("click", handler, true)로 활성화
  • 사용 사례: 이벤트가 목표 요소에 도달하기 전에 조기 처리 (예: 링크 클릭 방지)

4. 버블링 vs 캡처링 선택 기준

  • 버블링 사용 시:

- 부모 요소가 자식의 이벤트를 반응해야 할 때

- 모달 닫기 등 전역 이벤트 처리

  • 캡처링 사용 시:

- 이벤트가 목표 요소에 도달하기 전에 중단해야 할 때

- 분석 도구나 고위치 DOM 리스너 구현

5. 이벤트 전파 중단

  • event.stopPropagation() → 이벤트 흐름 중단 (캡처링/버블링 모두)
  • event.stopImmediatePropagation() → 동일 요소의 다른 핸들러 중단

결론

  • 이벤트 전파는 DOM 기반 애플리케이션에서 이벤트 관리의 핵심이며, 버블링(기본)과 캡처링(명시적 설정)을 이해해야 효과적인 이벤트 위임과 제어가 가능
  • addEventListener의 세 번째 인자 true로 캡처링 활성화, stopPropagation()으로 흐름 중단
  • 실무 팁: 버블링은 재사용 가능한 컴포넌트 설계에 유리, 캡처링은 전역 이벤트 모니터링에 적합