
เมื่อฟังก์ชันเหตุการณ์ของเราถูกทริกเกอร์ ฟังก์ชันเหตุการณ์จะได้รับออบเจ็กต์เหตุการณ์จริงๆ
เมื่อเรารันเมธอด event.stopPropagation() ในฟังก์ชัน event ของเรา เหตุการณ์เดือดปุดๆ จะสิ้นสุดที่นี่
กิจกรรมบางประเภทไม่สนับสนุนกิจกรรมที่กำลังเดือดพล่าน
เหตุการณ์ฟองสบู่จะทริกเกอร์ ฟังก์ชันเหตุการณ์ประเภทเดียวกัน เท่านั้น
มีสองวิธีในการป้องกันเหตุการณ์ที่เดือดปุด ๆ วิธีหนึ่งคือคุณสมบัติและอีกวิธีหนึ่งคือวิธีการ
ตั้งค่าหรือส่งคืนว่าเหตุการณ์ควรจะเผยแพร่ไปยังระดับบนหรือไม่
ไวยากรณ์:
event.cancelBubble = true;
ป้องกันไม่ให้เหตุการณ์แพร่กระจายต่อไปในสตรีมเหตุการณ์
ไวยากรณ์:
event.stopPropagation();
ตัวอย่าง: ผูกฟังก์ชันตอบสนองการคลิกกับวัตถุสามรายการที่เป็นพาเรนต์และลูกร่วมกัน

window.onload = ฟังก์ชั่น () {
var span = document.getElementById("sp");
span.onclick = ฟังก์ชั่น () {
alert('แท็กช่วง');
-
กล่อง var = document.getElementById('box3');
box3.onclick = ฟังก์ชั่น(){
alert('box3');
-
var body = document.body;
body.onclick = ฟังก์ชั่น () {
alert('เนื้อหา');
}} ป้องกันการเดือดปุด ๆ สำหรับกล่อง: 
window.onload = ฟังก์ชั่น () {
var span = document.getElementById("sp");
span.onclick = ฟังก์ชั่น () {
alert('แท็กช่วง');
-
กล่อง var = document.getElementById('box3');
box3.onclick = ฟังก์ชั่น (เหตุการณ์) {
alert('box3');
เหตุการณ์.stopPropagation();
-
var body = document.body;
body.onclick = ฟังก์ชั่น () {
alert('เนื้อหา');
}} เมื่อเรามีแท็กย่อยจำนวนมากที่มีเหตุการณ์เดียวกัน เราสามารถเพิ่มเหตุการณ์ให้กับแท็กย่อยเหล่านั้นได้โดยข้ามแท็กย่อย แต่หากมีการเพิ่มองค์ประกอบแท็กย่อยใหม่ เราจะต้องเชื่อมโยงแท็กย่อยใหม่อีกครั้ง องค์ประกอบ มิฉะนั้น มันไม่ถูกต้อง
เชื่อมโยงเหตุการณ์กับ องค์ประกอบระดับบนสุด ดังนั้นเมื่อมีการทริกเกอร์เหตุการณ์ในองค์ประกอบระดับบนสุด เหตุการณ์นั้นจะ แสดงขึ้นมาที่องค์ประกอบระดับบนสุด และเหตุการณ์จะได้รับการประมวลผลผ่านเหตุการณ์การตอบสนองขององค์ประกอบระดับบนสุด การใช้ bubbling และการมอบหมาย คุณสามารถลดจำนวนการเชื่อมโยงเหตุการณ์และปรับปรุงประสิทธิภาพของโปรแกรมได้
หลังจากที่เราผูกเหตุการณ์เข้ากับองค์ประกอบบรรพบุรุษไม่ว่าเราจะคลิกองค์ประกอบใดภายในองค์ประกอบบรรพบุรุษก็ตาม เราหวังเพียงว่าเหตุการณ์นั้นจะถูกทริกเกอร์เมื่อเราคลิกองค์ประกอบภายในองค์ประกอบบรรพบุรุษ องค์ประกอบ ณ เวลานี้ เราต้องให้เงื่อนไขในการตัดสินไม่ว่าจะเป็นองค์ประกอบที่เราต้องการให้เกิดเหตุการณ์หรือไม่
ส่งคืนองค์ประกอบที่ทำให้เกิดเหตุการณ์
ไวยากรณ์:
event.taget;

window.onload = ฟังก์ชั่น () {
var ul = document.getElementById('ul1');
ul.onclick = ฟังก์ชั่น (เหตุการณ์) {
ถ้า (event.target.className == 'abq'){
alert('เหตุการณ์ถูกกระตุ้น!!')
-
-
//เพิ่มไฮเปอร์ลิงก์ document.getElementById('bt1').onclick = function(){
var li = document.createElement('li');
li.innerHTML = "<a href = 'javascript:;' class='abq'>แท็กใหม่</a>";
ul.ผนวกเด็ก(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('คลิก',ฟังก์ชัน(){
alert('box1');
},เท็จ);
box2.addEventListener('คลิก',ฟังก์ชัน(){
alert('box2');
},เท็จ);
box3.addEventListener('คลิก',ฟังก์ชัน(){
alert('box3');
},เท็จ);
- 
หากคุณต้องการทริกเกอร์เหตุการณ์ในระหว่างขั้นตอนการจับภาพ คุณสามารถตั้งค่าพารามิเตอร์ตัวที่สามของ addEventListener() ให้เป็นจริง! 
window.onload = ฟังก์ชั่น () {
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.addEventListener('คลิก',ฟังก์ชัน(){
alert('box1');
},จริง);
box2.addEventListener('คลิก',ฟังก์ชัน(){
alert('box2');
},จริง);
box3.addEventListener('คลิก',ฟังก์ชัน(){
alert('box3');
},จริง);
-