
Ketika fungsi event kita dipicu, fungsi event akan benar-benar menerima objek event.
Ketika kita menjalankan metode event.stopPropagation() di fungsi event kita, gelembung event berakhir di sini.
Tidak semua jenis acara mendukung penggelembungan acara.
Event bubble hanya akan memicu fungsi event dengan tipe yang sama.
Ada dua cara untuk mencegah kejadian bubbling, yang satu adalah properti dan yang lainnya adalah metode.
menetapkan atau mengembalikan apakah acara tersebut harus disebarkan ke tingkat atas.
Sintaks:
event.cancelBubble = true;
mencegah acara menyebar lebih jauh di aliran acara.
Sintaks:
event.stopPropagation();
Contoh: Mengikat fungsi respons klik ke tiga objek yang merupakan induk dan anak.

jendela.onload = fungsi(){
var span = dokumen.getElementById("sp");
span.onclick = fungsi(){
alert('tag rentang');
}
var kotak = dokumen.getElementById('box3');
box3.onclick = fungsi(){
peringatan('kotak3');
}
var body = dokumen.body;
body.onclick = fungsi(){
waspada('tubuh');
}} Cegah gelembung pada kotak:
jendela.onload = fungsi(){
var span = dokumen.getElementById("sp");
span.onclick = fungsi(){
alert('tag rentang');
}
var kotak = dokumen.getElementById('box3');
box3.onclick = fungsi(acara){
peringatan('kotak3');
acara.stopPropagation();
}
var body = dokumen.body;
body.onclick = fungsi(){
waspada('tubuh');
}} Ketika kita memiliki sekelompok sub-tag dengan peristiwa yang sama, kita dapat menambahkan peristiwa ke dalamnya dengan menelusuri sub-tag tersebut, namun jika elemen sub-tag baru ditambahkan, kita harus mengikat kembali sub-tag baru tersebut elemen, jika tidak maka tidak valid.
mengikat peristiwa ke elemen leluhur , sehingga ketika peristiwa pada elemen turunan dipicu, peristiwa tersebut akan menggelembung ke elemen leluhur , dan peristiwa tersebut akan diproses melalui peristiwa respons elemen leluhur. Dengan menggunakan penggelembungan dan delegasi, Anda dapat mengurangi jumlah pengikatan peristiwa dan meningkatkan kinerja program.
Setelah kita mengikat suatu peristiwa ke elemen leluhur, tidak peduli elemen mana yang kita klik di dalam elemen leluhur, peristiwa terkait akan terpicu Saat ini, kita perlu memberikan kondisi penilaian, apakah elemen tersebut ingin kita picu atau tidak.
mengembalikan elemen yang memicu peristiwa tersebut.
Sintaks:
event.taget;

jendela.onload = fungsi(){
var ul = dokumen.getElementById('ul1');
ul.onclick = fungsi(acara){
if(event.target.className == 'abq'){
alert('Acara dipicu!!')
}
}
//Tambahkan hyperlink document.getElementById('bt1').onclick = function(){
var li = dokumen.createElement('li');
li.innerHTML = "<a href = 'javascript:;' class='abq'>Tag baru</a>";
ul.appendChild(li);
}
} Melalui metode ini, Anda dapat mengikat beberapa fungsi respons peristiwa yang identik ke elemen yang sama.
. untuk mengikat peristiwa yang sama ke suatu elemen pada waktu yang sama. Tentukan beberapa fungsi respons, sehingga ketika peristiwa tersebut dipicu, fungsi respons akan dieksekusi sesuai urutan pengikatan fungsi tersebut!

jendela.onload = fungsi(){
var bt = dokumen.getElementById('bt1');
bt.addEventListener('klik',fungsi(){
alert('Fungsi terkait klik pertama terpicu!')
},PALSU);
bt.addEventListener('klik',fungsi(){
alert('Fungsi terkait klik kedua terpicu!')
},PALSU);
bt.addEventListener('klik',fungsi(){
alert('Fungsi terkait klik ketiga terpicu!')
}, false);} 
Fungsi respons dijalankan selama fase penggelembungan. Parameter default ketiga adalah false
window.onload = function(){
var box1 = dokumen.getElementById('box1');
var box2 = dokumen.getElementById('box2');
var box3 = dokumen.getElementById('box3');
box1.addEventListener('klik',fungsi(){
peringatan('kotak1');
},PALSU);
box2.addEventListener('klik',fungsi(){
peringatan('kotak2');
},PALSU);
box3.addEventListener('klik',fungsi(){
peringatan('kotak3');
},PALSU);
} 
Jika Anda ingin memicu peristiwa selama fase pengambilan, Anda dapat menyetel parameter ketiga addEventListener() ke true!
jendela.onload = fungsi(){
var box1 = dokumen.getElementById('box1');
var box2 = dokumen.getElementById('box2');
var box3 = dokumen.getElementById('box3');
box1.addEventListener('klik',fungsi(){
peringatan('kotak1');
},BENAR);
box2.addEventListener('klik',fungsi(){
peringatan('kotak2');
},BENAR);
box3.addEventListener('klik',fungsi(){
peringatan('kotak3');
},BENAR);
}