Bubbling Event di JavaScript

Bayangkan Anda memiliki beberapa blok yang bersarang satu sama lain:

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

Dapatkan referensi ke div kita dalam variabel:

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

Dan sekarang pasang penangan klik pada mereka:

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

Tampilkan blok kita di layar dengan menambahkan beberapa CSS:

Sekarang klik pada blok merah paling dalam - dan Anda akan melihat bagaimana event pertama terjadi di blok merah, lalu di biru, lalu di hijau. Dan ini logis, karena dengan mengklik blok dalam, Anda secara bersamaan mengklik semua blok luar.

Artinya, ketika Anda mengklik blok paling dalam, event klik muncul pertama di dalamnya, kemudian terpicu di parent-nya, di parent dari parent-nya, dan seterusnya, sampai ke paling atas.

Perilaku seperti ini disebut bubbling (bubbling) event - dianalogikan seperti gelembung udara yang naik dari dasar. Sama seperti gelembung, event kita seolah-olah terapung ke atas, setiap kali terpicu pada blok yang lebih tinggi.

Tulis sendiri kode yang akan mendemonstrasikan bubbling event. Ujilah bubbling berbagai jenis event padanya.

Tidak semua event dapat bubbling. Secara eksperimental carilah setidaknya satu event yang tidak akan bubbling.