JavaScript에서 버블링 즉시 중지

이벤트 처리를 완전히 중단하기 위해, 현대 브라우저는 stopImmediatePropagation 메서드를 지원합니다. 이 메서드는 버블링을 방지할 뿐만 아니라, 현재 요소에 대한 이벤트 처리를 중지합니다. 이를 적용해 보겠습니다:

javascriptelem1.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('빨간색');
});

확인해 보세요: