Pengecapan Peristiwa dalam JavaScript

Bayangkan anda mempunyai beberapa blok bersarang di dalam satu sama lain:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

Dapatkan rujukan kepada div kami dalam pembolehubah:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

Dan sekarang tambahkan pengendali klik pada mereka:

elem1.addEventListener('click', function() {
	alert('hijau');
});
elem2.addEventListener('click', function() {
	alert('biru');
});
elem3.addEventListener('click', function() {
	alert('merah');
});

Tunjukkan blok kami pada skrin, dengan menambah sedikit CSS:

Sekarang klik pada blok merah paling dalam - dan anda akan lihat bagaimana peristiwa mula-mula berlaku dalam blok merah, kemudian dalam biru, kemudian dalam hijau. Dan ini logik, kerana mengklik pada blok dalaman, anda secara serentak mengklik pada semua blok luaran.

Iaitu, ternyata apabila anda mengklik pada blok paling dalam, peristiwa klik timbul pertama di dalamnya, kemudian dicetuskan dalam induknya, dalam induk induknya dan seterusnya, sehingga ia sampai ke puncak.

Tingkah laku ini dipanggil pengecapan (bubbling) peristiwa - secara analogi dengan gelembung udara yang timbul dari bawah. Sama seperti gelembung, peristiwa kami seolah-olah timbul ke atas, setiap kali dicetuskan pada blok yang lebih tinggi.

Tulis sendiri kod yang akan mendemonstrasikan pengecapan peristiwa. Uji pengecapan pelbagai jenis peristiwa padanya.

Tidak semua peristiwa boleh timbul. Secara eksperimen cari sekurang-kurangnya satu peristiwa yang tidak akan timbul.