이벤트 버블링, 이벤트 캡처

1. 이벤트 버블링

이벤트 버블링은 특정 화면 요소에 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

e.g. index.html

  <body>
    <div class="one">
      <div class="two">
        <div class="three">
          <button class="button">버튼</button>
        </div>
      </div>
    </div>

    <script src="event.js"></script>
  </body>

e.g. event.js

let divs = document.querySelectorAll("div");

function ClickButton(tag) {
  console.log(tag.currentTarget.className);
}

divs.forEach((div) => {
  div.addEventListener("click", ClickButton);
});

// three,two,one이 차례로 나온다.
// three만 나올 줄 알았는데 three,two,one 이 다 나온다.. (이벤트 버블링)

2. 이벤트 캡처

이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

e.g. index.html

  <body>
    <div class="one">
      <div class="two">
        <div class="three">
          <button class="button">버튼</button>
        </div>
      </div>
    </div>

    <script src="event.js"></script>
  </body>

e.g. event.js

let divs = document.querySelectorAll("div");

function ClickButton(tag) {
  console.log(tag.currentTarget.className);
}

divs.forEach((div) => {
  div.addEventListener("click", ClickButton, { capture: true });
});

// one,two,three가 차례대로 나온다