[JS] Day 25 - Event Capture, Propagation, Bubbling and Once

demo:

demo사이트

github:

Danji-ya

Day 25 - Event Capture, Propagation, Bubbling and Once

🎯 기능 요구사항

• 캡처링, propagation, 버블링에 대해서 알아보자.

🚀 배운 점

버블링과 캡처링에서 알아봐서 once이외에는 처음보는 내용은 아니였다.

once 옵션

addEventListener('click', function () { ... }, { capture: true,
once: true});

capture 옵션이외에도 once 옵션이 있는데 이는 이벤트가 단 한번만 실행되고 이벤트가 더 이상 실행이 되지 않도록 하는 옵션이다.

이후에 버튼을 눌러도 동작하지 않는다.

💻 최종코드

const divs = document.querySelectorAll('div');

function logText(e) {
  console.log(this.classList.value);
//   e.stopPropagation(); // 버블링이 일어나지 않도록
}

[...divs].map(div => div.addEventListener('click', logText, {
  capture: true, // 캡처링 확인 시
  once: true
}));