브라우저에서 이벤트가 발생하고 전파되는 방식

Posted 2 years Updated 2 years

By 베짱이가 되고싶은 개미。

📝 이벤트 버블링 - Event Bubbling

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 이는 이벤트가 가장 하위의 요소에서 시작하여 상위 요소로 전파되는 방식입니다.

<body>
  <div class="layer1">
    <div class="layer2">
      <div class="layer3">
        </div>
     </div>
   </div>
 </body>

 <script>
  var divList = document.querySelectorAll('div');
  divList.forEach(function(div) {
    div.addEventListener('click', logEvent);
  });

  function logEvent(event) {
    console.log(event.currentTarget.className);
  }
</script>

클릭한 것이 가장 하위의 div 태그인 "layer3"이라면, 콘솔에는 "layer3 -> layer2 -> layer1" 순서로 출력됩니다. 이는 이벤트가 하위에서 상위 요소로 전파되는 특성을 보여줍니다.

📝 이벤트 캡쳐 - Event Capture

이벤트 캡쳐는 이벤트 버블링과는 반대 방향으로 이벤트가 전파되는 방식입니다. 이는 이벤트가 최상위 요소에서 시작하여 가장 하위의 요소로 향하는 방식입니다.

<body>
<div class="layer1">
  <div class="layer2">
    <div class="layer3">
      </div>
    </div>
  </div>
</body>

<script>
var divList = document.querySelectorAll('div');
divList.forEach(function(div) {
  div.addEventListener('click', logEvent, true);
});

function logEvent(event) {
  console.log(event.currentTarget.className);
}
</script>

📝 stopPropagation()

stopPropagation() 메서드는 이벤트의 전파를 중지시키는 역할을 합니다. 만약 이를 사용하면 이벤트가 현재 요소에서 더 이상 상위 또는 하위로 전파되지 않습니다.

function logEvent(event) {
  event.stopPropagation();
  console.log(event.currentTarget.className);
}