이벤트 캡처링 (Event Capturing) 이란?

이벤트 캡처링이란?

• 이벤트 버블링 전에 일어나는 단계이다.
  • 이벤트 캡처링 개념을 알기 위해서 이벤트 버블링부터 공부하는 것이 좋다.
• 캡처링 -> 타겟 -> 버블링 순으로 이벤트가 흘러간다.

엘리먼트에 캡처링 이벤트를 등록하는 방법

element.addEventListener("click", () => {}, true);

• 위와 같이 코딩하면, 캡처링 이벤트를 등록할 수 있다.

캡처링, 버블링 결과 예측해보기

<div id="div">
  <span id="span">HELLO</span>
</div>

<script>
  const $span = document.getElementById("span");
  const $div = document.getElementById("div");

  $div.addEventListener(
    "click",
    (e) => {
      console.log("capturing div");
    },
    true
  );

  $span.addEventListener(
    "click",
    (e) => {
      console.log("capturing span");
    },
    true
  );

  $div.addEventListener("click", (e) => {
    console.log("bubbling div");
  });

  $span.addEventListener("click", (e) => {
    console.log("bubbling span");
  });
</script>

• 위의 코드를 실행하면, 순서대로 어떤 것이 로그에 찍히는지 예상할 수 있으면, 캡처링과 버블링을 명확히 이해한 것이다.
  • 헷갈린다면 버블링은 바닥에서부터 거품이 뽀글뽀글 올라오는 이미지라고 생각해보자.

정답은 아래의 순서로 로깅된다.

capturing div
capturing span
bubbling span
bubbling div

엘리먼트에 등록된 캡처링 이벤트를 해제할 때 주의점

element.removeEventListener("click", () => {}, true);

이벤트를 제거할 때도 등록할 때처럼 3번째 인자에 true 를 넘겨주어 캡처링 이벤트를 제거함을 명시해야 한다.

event.eventPhase

• event.eventPhase 는 현재 이벤트의 단계를 알려준다.

<div id="div">
  <span id="span">HELLO</span>
</div>

<script>
  const $span = document.getElementById("span");
  const $div = document.getElementById("div");

  $div.addEventListener(
    "click",
    (e) => {
      console.log("capturing div", e.eventPhase);
    },
    true
  );

  $span.addEventListener(
    "click",
    (e) => {
      console.log("capturing span", e.eventPhase);
    },
    true
  );

  $div.addEventListener("click", (e) => {
    console.log("bubbling div", e.eventPhase);
  });

  $span.addEventListener("click", (e) => {
    console.log("bubbling span", e.eventPhase);
  });
</script>

• 위 코드를 넣고, span 을 클릭하면 결과는 다음과 같이 나온다.

capturing div 1
capturing span 2
bubbling span 2
bubbling div 3

• 2 가 두번 나오는 이유는, 이벤트 입장에서는 span 은 타겟이기 때문이다.
  • 1: 이벤트 캡처링
  • 2: 타겟
  • 3: 이벤트 버블링