[JavaScript] 이벤트 흐름과 addEventListener 의 캡쳐 리스너 와 버블 리스터에 따른 흐름

JavaScript

[JavaScript] 이벤트 흐름과 addEventListener 의 캡쳐 리스너 와 버블 리스터에 따른 흐름

joheamin 2025. 1. 31. 16:19

🔷 이벤트 흐름이란?

문서 내부에 엘리먼트들은 계층적 구조로 이루어져 있기 때문에발생하게 된다.

하나의 엘리먼트에서 이벤트가 발생할 경우 계층을 따라 연쇄적으로 이벤트 흐름이 발생하게 된다.

🔹 흐름 3단계

1️⃣ 캡쳐 단계 : window 부터 모든 DOM객체를 차례대로 거쳐 타켓에 이벤트가 전달되는 과정

2️⃣타깃 단계 : 이벤트가 실제 요소에게 전달

3️⃣버블링 단계 : 타겟 부터 중간에 모든 DOM 객체를 거쳐 window 객체에 이벤트가 전달되는 과정

💡캡쳐 단계와 버블링 단계에서 겨쳐가는 DOM객체들은 해당 이벤트의 addEventListener 속성에 따라

거쳐가는 모든 DOM 객체들의 이벤트 리스너를 실행한다.

기본값은 버블링 단계이며 , 타깃 객체부터 window 객체 순서로 이벤트 리스너가 발생된다.

흐름을 볼 수 있는 예제

<div onclick="alert('첫번째 div')">
      1
      <div onclick="alert('두번째 div')">
        2
        <div onclick="alert('세번째 div')">3</div>
      </div>
    </div>

👉 기본값으로는 버블링 단계 (false) 이므로 3을 클릭하면 3 2 1 순으로 객체의 이벤트 리스너 발생

🔷 addEventListener 란

스크립트 언어를 통해 이벤트 리스너를 추가 해주는 함수이다.

addEventListener(’이벤트Type’,이벤트 핸들러,[capture 사용여부])

이때 이벤트 핸들러는 callBack 함수로 ()없이 함수 이름만 정의한다.

capture는 필요 시에 사용하며, 이벤트 흐름의 리스너를 발생할 단계를 설정한다.

true ⇒ 캡쳐 단계

false ⇒ 버블링 단계(기본값)

addEventListener 적용 예제

<script>
    onload = () => {
      let p = document.getElementById("text");
      p.addEventListener("mouseover", over);
      p.addEventListener("mouseout", out);
    };
    function over() {
      this.style.color = "red";
    }
    function out() {
      this.style.color = "black";
    }
  </script>
  <body>
    <p id="text">마우스 올리면 textColor change</p>
  </h3></pre>
  </body>

👉 마우스를 올리면 over 함수가 실행

마우스를 내리면 out 함수가 실행

🤔 addEventListener 의 세번째 인자에 따라서 리스너 발생?

위에서 말했다시피 addEventListener 의 세번째 인자는 이벤트 흐름의 리스너를 발생할 단계를 설정한다.

입력하지않으면 기본값 false가 들어가며 , 버블링 단계에서 거쳐가는 DOM객체들의 이벤트 리스너가 실행 된다.

그렇다면 true를 준다면 어떻게 될지 살펴 보자.

이벤트 리스터 발생 단계 : true

해당 엘리먼트를 클릭할 시 발생하는 리스너로 익명함수를 통하여 이벤트 핸들러 생성
실행 단계 흐름은 true로 지정

    <div id="first">
      1
      <div id="second">
        2
        <div id="third">3</div>
      </div>
    </div>

<script>
    let first = document.getElementById("first");
    let second = document.getElementById("second");
    let third = document.getElementById("third");

    first.addEventListener("click", () => {
      alert("first");
    },true);
    second.addEventListener("click", () => {
      alert("second");
    },true);
    third.addEventListener("click", () => {
      alert("third");
    },true);
  </script>