버블링과 캡처링에서 알아봐서 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
}));