목표

  • 이벤트 버블링과 캡처링이 무엇인지 이해한다.

이벤트

  • 기본적으로 js에서는 각 요소(element)가 이벤트를 발생시킬 수 있고, 이벤트 리스너를 통해서 이벤트가 발생했을 때의 동작을 명시할 수 있다.
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("event!");
});

이벤트 전파

  • 실제로 이벤트가 발생한 요소가 아니라 다른 요소에서 이를 처리하고 싶을 떄가 있다. 이 때 이벤트 전파를 이용하게 된다.
  • 이벤트 전파는 버블링과 캡처링이 존재한다.
  • 이벤트가 발생하면 3가지 단계로 이벤트가 흐른다.
    1. 캡처링 단계: 이벤트가 하위 요소에 전파되는 단계
    2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
    3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
  • 이벤트가 발생하면 최상위 조상에서 시작해서 아래로 전파가 시작되고 캡처링 -> 타깃 -> 버블링 단계를 거치게 된다.

  • 기본적으로 이벤트 리스너를 추가하면 타깃 단계와 버블링 단계에서 이벤트를 처리한다.
  • 캡처링 단계에서 이벤트를 처리하고 싶으면 이벤트 리스너에 옵션을 추가해줘야된다.
elem.addEventListener(..., {capture: true}) // 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 된다.
elem.addEventListener(..., true)

이벤트 객체

  • 이밴트 리스너에서 event 객체를 통해 각 정보를 얻을 수 있다.
    • event.target: 이벤트가 발생한 가장 안쪽의 요소
    • event.currentTarget: 이벤트를 핸들링 하는 현재 요소 (핸들러가 실제 할당된 요소)
    • event.eventPhase: 현재 이벤트 흐름 단계(캡처링=1, 타깃=2, 버블링=3)
const btn = document.querySelector("button");
btn.addEventListener("click", (event) => {
  console.log(event.currentTarget);
});

이벤트 전파 막기

  • 리스너에서 이벤트가 더 이상 버블링이나 캡처링이 되지 않도록 막을 수 있다.
  • event.stopPropagation()

참고 자료