이벤트 함수가 트리거되면 이벤트 함수가 실제로 이벤트 개체를 수신합니다.
이벤트 함수에서 event.stopPropagation() 메서드를 실행하면 이벤트 버블링이 여기서 끝납니다.
모든 유형의 이벤트가 이벤트 버블링을 지원하는 것은 아닙니다.
이벤트 버블링은 동일한 유형의 이벤트 함수만 트리거합니다.
버블링 이벤트를 방지하는 방법에는 두 가지가 있습니다. 하나는 속성이고 다른 하나는 메서드입니다.
이벤트가 상위 레벨로 전파되어야 하는지 여부를 설정하거나 반환합니다.
구문:
event.cancelBubble = true;
이벤트가 이벤트 스트림에서 더 이상 전파되는 것을 방지합니다.
구문:
event.stopPropagation();
예: 클릭 응답 함수를 상호 상위 및 하위 개체인 세 개체에 바인딩합니다.
window.onload = 함수(){
var span = document.getElementById("sp");
스팬.온클릭 = 함수(){
Alert('스팬 태그');
}
var box = document.getElementById('box3');
box3.onclick = 함수(){
경고('박스3');
}
var body = document.body;
body.onclick = 함수(){
경고('본문');
}} 상자의 버블링을 방지합니다. 
window.onload = 함수(){
var span = document.getElementById("sp");
스팬.온클릭 = 함수(){
Alert('스팬 태그');
}
var box = document.getElementById('box3');
box3.onclick = 함수(이벤트){
경고('박스3');
event.stopPropagation();
}
var body = document.body;
body.onclick = 함수(){
경고('본문');
}} 동일한 이벤트가 포함된 여러 하위 태그가 있는 경우 하위 태그를 순회하여 이벤트를 추가할 수 있지만 새 하위 태그 요소가 추가되면 새 하위 태그를 다시 바인딩해야 합니다. 요소, 그렇지 않으면 유효하지 않습니다.
이벤트를 조상 요소 에 바인딩하므로 하위 요소의 이벤트가 트리거되면 상위 요소까지 버블링 되고 이벤트는 조상 요소의 응답 이벤트를 통해 처리됩니다. 버블링 및 위임을 사용하면 이벤트 바인딩 수를 줄이고 프로그램 성능을 향상시킬 수 있습니다.
이벤트를 조상 요소에 바인딩한 후에는 조상 요소 내에서 어떤 요소를 클릭하든 해당 이벤트가 발생하기를 바랍니다. 조상 내의 요소를 클릭하면 됩니다. 이때 이벤트를 발생시키려는 요소인지 판단 조건을 주어야 합니다.
이벤트를 트리거한 요소를 반환합니다.
구문:
event.taget;
window.onload = 함수(){
var ul = document.getElementById('ul1');
ul.onclick = 함수(이벤트){
if(event.target.className == 'abq'){
Alert('이벤트가 발생했습니다!!')
}
}
//하이퍼링크 추가 document.getElementById('bt1').onclick = function(){
var li = document.createElement('li');
li.innerHTML = "<a href = 'javascript:;' class='abq'>새 태그</a>";
ul.appendChild(li);
}
} 이 메서드를 통해 여러 개의 동일한 이벤트 응답 함수를 동일한 요소에 바인딩할 수 있습니다.
. 동일한 이벤트를 요소에 동시에 바인딩하려면 이벤트가 트리거될 때 함수가 바인딩된 순서대로 응답 함수가 실행되도록 여러 응답 함수를 정의하세요!
window.onload = 함수(){
var bt = document.getElementById('bt1');
bt.addEventListener('클릭',function(){
Alert('첫 번째 클릭에 해당하는 함수가 실행되었습니다!')
},거짓);
bt.addEventListener('클릭',function(){
Alert('두 번째 클릭에 해당하는 함수가 실행되었습니다!')
},거짓);
bt.addEventListener('클릭',function(){
Alert('세 번째 클릭에 해당하는 함수가 실행되었습니다!')
}, false);} 
응답 기능은 버블링 단계에서 실행됩니다. 기본 세 번째 매개변수는 false입니다.
window.onload = function(){
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.addEventListener('클릭',function(){
경고('박스1');
},거짓);
box2.addEventListener('클릭',function(){
경고('박스2');
},거짓);
box3.addEventListener('클릭',function(){
경고('박스3');
},거짓);
} 
캡처 단계 중에 이벤트를 트리거하려면 addEventListener()의 세 번째 매개변수를 true로 설정하면 됩니다! 
window.onload = 함수(){
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.addEventListener('클릭',function(){
경고('박스1');
},진실);
box2.addEventListener('클릭',function(){
경고('박스2');
},진실);
box3.addEventListener('클릭',function(){
경고('박스3');
},진실);
}