Bubbling degli eventi in JavaScript

Immaginate di avere diversi blocchi annidati uno dentro l'altro:

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

Otteniamo i riferimenti ai nostri div in variabili:

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

E ora aggiungiamo ad essi dei gestori di click:

elem1.addEventListener('click', function() {
	alert('verde');
});
elem2.addEventListener('click', function() {
	alert('blu');
});
elem3.addEventListener('click', function() {
	alert('rosso');
});

Visualizziamo i nostri blocchi sullo schermo, aggiungendo loro un po' di CSS:

Ora cliccate sul blocco rosso più interno - e vedrete che l'evento prima si attiverà nel blocco rosso, poi in quello blu, poi in quello verde. E questo è logico, perché cliccando sul blocco interno, state contemporaneamente cliccando su tutti quelli esterni.

Cioè, risulta che quando cliccate sul blocco più interno, l'evento click si verifica prima in esso, poi si attiva nel suo genitore, nel genitore del suo genitore e così via, finché non arriva in cima.

Questo comportamento è chiamato bubbling (bubbling) degli eventi - per analogia con la risalita di una bolla d'aria dal fondo. Così come una bolla, il nostro evento sembra risalire verso l'alto, attivandosi ogni volta su blocchi più in alto.

Scrivete autonomamente il codice che dimostri il bubbling degli eventi. Verificate su di esso il bubbling di vari tipi di eventi.

Non tutti gli eventi possono fare bubbling. Trovate sperimentalmente almeno un evento che non faccia bubbling.