=> 해당 페이지만으로 이해가 안가 상세히 설명한 페이지를 찾았다.
유튜브로도 종종 보고 있는 캡틴판교님의 블로그 글
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
위의 링크 블로그에 자세히 설명이 되어 있는데
내 말로 풀러 정리하자면
=> 하위 div를 작동시켰을때 상위 태그들로 전달되어 작동하는 것이다.
=> 하나의 태그를 특정해 지정하지 않고 All로 모든 div를 가져와 이용했을때 발생했다.
=> 이 경우에만 작동하는지는 모르겠음 .
addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 됩니다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색합니다.
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
function logEvent(event) {
event.stopPropagation();
console.log(event.currentTarget.className); // three
}
=> 다음의 코드로 강제로 버블과 캡쳐를 중지 시킬 수 있다.
다음은 이벤트 위임