이벤트 캡쳐링, 버블링

Rock Kyun·2023년 11월 2일

오늘 학습한 것

Event capturing / Event Bubbling

이벤트 전파 흐름

아래 코드를 보면 html -> body -> main -> div -> p -> span...
부모 -> 자식 요소 -> 자식 요소... 이런 구조인데
Event Phase는 최상위 요소부터 하위요소(타겟요소)로 전파되고
타겟요소에서 다시 최상위 요소로 전파되는 흐름을 가지고 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div>
        <p>
          <span>Event Phase를 설명 중입니다.</span>
        </p>
      </div>
    </main>
  </body>
</html>

Event capturing, bubbling

이벤트가
상위 -> 하위 로 전해지는 것을 Event Capturing
하위 -> 상위 요소로 전해지는 것을 Event Bubbling

addEventListener

Bubbling으로 동작을 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div>
        <p>
          나는 p태그 입니다.
          <span>Event Phase를 설명 중입니다.</span>
        </p>
      </div>
    </main>
  </body>
</html>


<script>
  const s = document.querySelector("span");
  const p = document.querySelector("p");

  
  s.addEventListener("click", () => console.log("i'm span"));
  p.addEventListener("click", () => console.log("i'm paragraph"));
</script>

만약 위의 코드와 같이
최하위 span 태그에 addEventListener 를 적용하고
span의 상위 요소에도 addEventListener 를 적용 후
span요소의 이벤트를 실행하면 아래와 같은 결과가 나온다.

<console.log 결과>
  
i'm span // 하위 요소인 span 요소만 클릭했을 뿐인데 
i'm paragraph // 상위 요소인 p의 이벤트도 작동시킨다.

Event Phase (이벤트 흐름의 단계)

addEventListener 의 인자로 event 객체 를 전달하면
event.phase 로 이벤트 전파 단계를 볼 수 있는데
이것은 이벤트의 단계를 나타내며 아래와 같이 나타난다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div>
        <p>
          나는 p태그 입니다.
          <span>Event Phase를 설명 중입니다.</span>
        </p>
      </div>
    </main>
  </body>
</html>

<script>
  const s = document.querySelector("span");
  const p = document.querySelector("p");

  s.addEventListener("click", (event) =>
    console.log(`i'm span ${event.eventPhase}`) // i'm span 2 (타겟 요소 도착 단계)
  );

  p.addEventListener("click", (event) =>
    console.log(`i'm paragraph ${event.eventPhase}`) // i'm paragraph 3 (이벤트 버블링 단계)
  );
</script>