Bubbling-ul evenimentelor în JavaScript

Imaginați-vă că aveți mai multe blocuri imbricate unul în celălalt:

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

Să obținem referințele către div-urile noastre în variabile:

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

Și acum să atașăm handler-e de click pe ele:

elem1.addEventListener('click', function() {
	alert('verde');
});
elem2.addEventListener('click', function() {
	alert('albastru');
});
elem3.addEventListener('click', function() {
	alert('roșu');
});

Să afișăm blocurile noastre pe ecran, adăugându-le ceva CSS:

Apăsați acum pe cel mai interior bloc roșu - și veți vedea cum evenimentul mai întâi se va declanșa în blocul roșu, apoi în cel albastru, apoi în cel verde. Și este logic, pentru că făcând click pe blocul interior, faceți click simultan pe toate blocurile exterioare.

Adică se dovedește că atunci când faceți click pe cel mai interior bloc, evenimentul de click apare mai întâi în el, apoi se declanșează în părintele său, în părintele părintelui său și așa mai departe, până când ajunge până în vârf.

Acest comportament se numește bubbling (bubbling) al evenimentelor - prin analogie cu ridicarea unei bule de aer de pe fund. La fel ca și bula, evenimentul nostru ca și cum se ridică în sus, declanșându-se de fiecare dată pe blocuri mai superioare.

Scrieți independent codul care va demonstra bubbling-ul evenimentelor. Verificați pe el bubbling-ul diferitelor tipuri de evenimente.

Nu toate evenimentele pot să facă bubbling. Găsiți experimental cel puțin un eveniment care nu va face bubbling.