이벤트 – 버블링과 캡처링

<div id="purple" onclick="alert('hello!')">
   <div id="yellow" onclick="alert('hi!')">
      <button>Click!</button>
   </div>
</div>

이러한 html 요소들이 있다고 해보자.

보라색 부분을 클릭하면?

노란색 부분을 클릭하면?

버튼을 클릭하면?

어떻게 될까?

 

보라색 부분을 클릭하면 당연히 hello! 라고 알림창이 뜬다.

노란색 부분을 클릭하면 hi!가 뜨고, 이어서 hello! 가 뜬다.

 

분명 노란색 div에는 alert('hi!')밖에 없는데 왜 그 부모의 이벤트까지 실행되는걸까?

 

그게 바로 버블링이다.

이벤트가 발생한 요소부터 루트 요소에 갈 때까지 차례대로 이벤트가 실행된다.

 

버블링이 있기 때문에 이벤트를 발생시킨 최초의 요소와 이벤트리스너가 있는 원래 요소가 다를 때가 생긴다.

그래서 이벤트의 타겟을 가져올 때 구분해야 하는 점이 있는데....

currentTarget과 target 이다.

.addEventListener("click", (e) => console.log(e.currentTarget));

.addEventListener("click", (e) => console.log(e.target));

currentTarget은 이벤트 리스너가 설정된 요소를 가리킨다.

target은 이 이벤트를 발생시킨 최초의 요소를 가져온다. 버블링이 일어났다면, 버블링을 일으킨 최초의 타겟을 가져오게 된다.

 

<div id="red" style="background-color:red; padding:1rem">
  <div id="yellow" style="background-color:yellow; padding:1rem">
    <button>Click!</button>
  </div>
</div>

<script>
  document
    .getElementById("red")
    .addEventListener("click", (e) => console.log(e.target));
  document
    .getElementById("red")
    .addEventListener("click", (e) => console.log(e.currentTarget));
</script>

 

     

 

이런 코드가 있다고 할 때 버튼, 노란 부분, 빨간 부분을 클릭하면 콘솔에 뭐가 뜨는지 확인해보면 이해가 빠를 것이다.

 

캡쳐링이란?

버블링과는 반대방향으로 이벤트가 전파되는 것을 말한다.

상위에서 하위로 이벤트가 전달되며, 자주 쓰이는 것 같진 않다.

 

캡쳐링 사용법

addEventListener("이벤트이름", "함수", [캡쳐링 여부 : 기본false])

addEventListener에는 세번째 인자도 넣을 수 있는데, 그게 바로 캡쳐링 여부를 뜻하는 인자이다.

기본적으로 false로 되어있으며, 명시적으로 true라고 쓰면 캡쳐링을 일으킨다.