JavaScript에서 요소에 여러 이벤트 핸들러
요소에 동일한 이벤트에 대한 여러 핸들러가 있는 경우,
버블링이 중단되더라도 모든 핸들러가 실행됩니다.
즉, stopPropagation은 이벤트의 전파를 막지만,
현재 요소의 모든 핸들러는 작동합니다.
다음 예시를 확인하세요:
elem1.addEventListener('click', function() {
console.log('녹색');
});
elem2.addEventListener('click', function(event) {
console.log('하늘색 - 첫 번째 핸들러');
event.stopPropagation(); // 버블링 중지
});
elem2.addEventListener('click', function() {
console.log('하늘색 - 두 번째 핸들러'); // 여전히 실행됨
});
elem3.addEventListener('click', function() {
console.log('빨간색');
});
직접 확인할 수 있습니다:
