DOM 이벤트 전파(Event Propagation) 완벽 가이드

웹 개발에서 자주 마주치는 개념 중 하나가 바로 이벤트 전파(event propagation)입니다. 이 글에서는 이벤트 전파의 원리와 실전 활용법을 쉽고 명확하게 설명합니다.

이벤트 전파란?

이벤트 전파는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떤 경로로 전달되는지를 설명하는 개념입니다. 이 메커니즘을 이해하면, 복잡한 사용자 인터페이스에서 효율적으로 이벤트를 제어할 수 있습니다.

이벤트 전파의 3단계

이벤트 전파는 다음과 같은 세 단계로 이루어집니다:

각 단계의 동작 방식

1. 캡처링(Capturing) 단계
   이벤트가 DOM 트리의 최상위 요소에서 시작해, 이벤트가 발생한 타깃 요소로 내려갑니다. 이 과정에서 상위 요소에 등록된 리스너가 실행될 수 있습니다.

2. 타겟(Target) 단계
   이벤트가 실제로 발생한 요소에 도달합니다. 이때 타깃 요소에 등록된 이벤트 리스너가 실행됩니다.

3. 버블링(Bubbling) 단계
   이벤트가 타깃 요소에서 다시 상위 요소로 전파되며 올라갑니다. 상위 요소에 등록된 리스너가 실행될 수 있습니다.

실생활 비유로 이해하기

이벤트 전파를 건물의 경비 시스템에 비유할 수 있습니다:

• 캡처링: 건물 입구에서 경비원이 방문자를 확인하며 각 층을 거쳐 내려갑니다.
• 타겟: 방문자가 실제로 방문할 사무실에 도착합니다.
• 버블링: 방문자가 사무실에서 나와 다시 각 층을 거쳐 건물 밖으로 나갑니다.

코드 예시: addEventListener와 전파 단계

// HTML 구조 예시
// <div id="parent">
//   <button id="child">Click me</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 캡처링 단계에서 이벤트 리스너 등록
parent.addEventListener('click', () => {
  console.log('Parent - Capturing');
}, { capture: true });

// 버블링 단계에서 이벤트 리스너 등록 (기본값)
parent.addEventListener('click', () => {
  console.log('Parent - Bubbling');
});

child.addEventListener('click', () => {
  console.log('Child - Target');
});

이벤트 전파 제어하기

• 캡처링 단계에서 처리: addEventListener의 세 번째 인자에 { capture: true }를 전달하면 캡처링 단계에서 이벤트를 처리할 수 있습니다.
• 이벤트 전파 중단: event.stopPropagation()을 사용하면 특정 단계에서 이벤트 전파를 중단할 수 있습니다.

child.addEventListener('click', (event) => {
  event.stopPropagation(); // 이후 상위 요소로 이벤트가 전파되지 않음
  console.log('Child - Target & Stop Propagation');
});

이벤트 전파의 활용과 주의점

• 효율적인 이벤트 위임: 상위 요소에 이벤트를 등록해 하위 요소의 이벤트를 한 번에 처리할 수 있습니다.
• 예상치 못한 동작 방지: 불필요한 이벤트 전파를 막아 의도치 않은 동작을 방지할 수 있습니다.

결론: 이벤트 전파, 왜 중요한가?

이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 핵심 메커니즘입니다. 이를 이해하면 복잡한 사용자 상호작용을 효율적으로 관리할 수 있으며, 버그 없는 프론트엔드 코드를 작성하는 데 큰 도움이 됩니다.

참고 자료

• MDN Web Docs - Event bubbling and capturing
• MDN Web Docs - addEventListener