JavaScript에서 버블링 즉시 중지
이벤트 처리를 완전히 중단하기 위해,
현대 브라우저는 stopImmediatePropagation 메서드를 지원합니다.
이 메서드는 버블링을 방지할 뿐만 아니라,
현재 요소에 대한 이벤트 처리를 중지합니다.
이를 적용해 보겠습니다:
elem1.addEventListener('click', function() {
console.log('초록색');
});
elem2.addEventListener('click', function(event) {
console.log('파란색 - 첫 번째 핸들러');
event.stopImmediatePropagation(); // 버블링 중지
});
elem2.addEventListener('click', function() {
console.log('파란색 - 두 번째 핸들러'); // 더 이상 실행되지 않음
});
elem3.addEventListener('click', function() {
console.log('빨간색');
});
확인해 보세요:
