[JavaScript] 이벤트 전파(event propagation)

[JavaScript] 이벤트 전파(event propagation)

·

2 min read

이벤트 전파(event propagation): DOM 이벤트의 흐름과 제어

이벤트 전파(Event Propagation)는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 메커니즘으로, 캡처링(Capturing), 타겟(Target), 버블링(Bubbling)의 세 단계로 나뉜다.

이벤트 전파의 세 단계

  1. 캡처링 단계

  • 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해서 이벤트가 발생한 요소(타겟)로 내려간다. 즉, 부모에서 자식으로 이벤트가 전달되는 과정.
  1. 타겟 단계
  • 이벤트가 실제로 발생한 요소(타겟)에 도달하는 단계. 이 시점에서 타겟 요소에 등록된 이벤트 리스너가 실행된다.
  1. 버블링 단계

  • 이 단계에서는 이벤트가 타겟 요소에서 다시 DOM 트리의 상위 요소로 전파된다. 즉, 자식에서 부모로 이벤트가 전달되는 과정.

예제 코드

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked!");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked!");
});

document.getElementById("button").addEventListener("click", () => {
  console.log("Button clicked!");
});

<div id="parent" style="padding: 20px; background-color: lightblue;">
  Parent
  <div id="child" style="padding: 20px; background-color: lightgreen;">
    Child
    <button id="button" style="padding: 10px;">Click Me</button>
  </div>
</div>

버튼 클릭 시 콘솔 출력:

Button clicked!
Child clicked!
Parent clicked!

기본적으로 이벤트는 버블링 단계에서 전파되기 때문에 버튼을 클릭했을 때, 콘솔에 다음과 같이 메시지가 출력되는 것을 확인할 수 있다.

캡처링 단계에서 이벤트 처리

기본적으로 이벤트는 버블링 단계에서 처리되지만, addEventListener의 세 번째 인자로 { capture: true }를 전달하면 캡처링 단계에서 이벤트를 처리할 수 있다.

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked during capturing!");
}, { capture: true });

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked during capturing!");
}, { capture: true });

document.getElementById("button").addEventListener("click", () => {
  console.log("Button clicked!");
});

버튼 클릭 시 콘솔 출력:

Parent clicked during capturing!
Child clicked during capturing!
Button clicked!

캡처링 단계에서 이벤트가 처리되었기 때문에 상위 요소의 이벤트 리스너가 먼저 실행된다는 것을 보여준다.

이벤트 전파 중단

event.stopPropagation() 메서드를 사용해서 이벤트 전파를 중단할 수 있다. 다음 코드는 버튼에서 발생한 이벤트가 상위 요소로 전파되지 않도록 설정한 예이다.

document.getElementById("button").addEventListener("click", (event) => {
  console.log("Button clicked!");
  event.stopPropagation();
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked!");
});

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked!");
});

버튼 클릭 시 콘솔 출력:

Button clicked!

콘솔 출력 시 event.stopPropagation()으로 인해 이벤트가 더 이상 상위 요소로 전파되지 않음을 알 수 있다.

요약

  • 이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 메커니즘으로, 복잡한 사용자 상호작용을 효율적으로 관리할 수 있다.

  • 이벤트는 캡처링 -> 타겟 -> 버블링 단계로 전파된다.

  • addEventListener{ capture: true }를 활용하여 캡처링 단계에서 이벤트를 처리할 수 있다.

  • event.stopPropagation()을 사용해 특정 단계에서 이벤트 전파를 차단할 수 있다.

참고