JavaScript 이벤트 전파: 캡처링과 버블링 마스터하기

핵심 기술

이 글은 JavaScript에서 DOM 이벤트가 발생하는 순서를 제어하는 이벤트 전파(Event Propagation) 메커니즘, 특히 캡처링(Capturing)과 버블링(Bubbling) 단계에 대해 상세히 설명하며, 이를 효과적으로 활용하는 방법을 제시합니다.

기술적 세부사항

• 이벤트 전파(Event Propagation): DOM에서 이벤트 핸들러가 호출되는 순서를 의미합니다.
  • 캡처링 단계 (Capturing Phase): 이벤트가 DOM 트리 상단에서 시작하여 대상 요소로 하향 이동합니다.
  • 버블링 단계 (Bubbling Phase): 이벤트가 대상 요소에서 시작하여 DOM 트리 상위 요소로 상향 이동합니다. JavaScript의 기본값입니다.
• addEventListener 사용법: addEventListener(type, listener, useCapture)에서 세 번째 인자인 useCapture에 true를 전달하면 캡처링 단계를 사용합니다.
• 예제 코드 분석: 버튼 클릭 시 부모, 자식, 버튼 순서로 콘솔 출력이 발생하는 캡처링과 버블링 조합 예제를 통해 동작 방식을 설명합니다.
• 사용 시점:
  • 버블링: 부모 컴포넌트가 자식 액션에 반응, 이벤트 위임 구현, 외부 클릭 시 모달 닫기 등.
  • 캡처링: 대상 요소 도달 전 이벤트 가로채기, 기본 동작 조기 방지, 상위 DOM에서의 분석/모니터링 등.
• 이벤트 흐름 제어:
  • event.stopPropagation(): 이벤트가 더 이상 전파되지 않도록 중지시킵니다.
  • event.stopImmediatePropagation(): 동일 요소의 다른 리스너도 실행되지 않도록 중지시킵니다.

개발 임팩트

이벤트 전파 메커니즘을 제대로 이해하면 복잡한 DOM 상호작용을 효율적으로 관리하고, 코드의 유지보수성을 높이며, 예상치 못한 이벤트 동작을 디버깅하는 데 큰 도움이 됩니다. 또한, 이벤트 위임 등을 통해 성능을 최적화할 수 있습니다.