Bubljenje događaja u JavaScript-u

Zamislite da imate nekoliko blokova ugniježđenih jedan u drugi:

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

Uzmićemo reference na naše div-ove u promenljive:

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

A sada ćemo im dodati osluškivače klikova:

elem1.addEventListener('click', function() {
	alert('zelena');
});
elem2.addEventListener('click', function() {
	alert('plava');
});
elem3.addEventListener('click', function() {
	alert('crvena');
});

Prikažimo naše blokove na ekranu, dodajući im nešto CSS-a:

Sada kliknite na najunutrašnji crveni blok - i videćete kako će se događaj prvo okidaši na crvenom bloku, zatim na plavom, pa na zelenom. I to je logično, jer klikajući na unutrašnji blok, istovremeno klikćete na sve spoljašnje.

To jest, ispada da kada kliknete na najunutrašnji blok, događaj klika nastaje prvo u njemu, zatim se odašilje u njegovom roditelju, u roditelju njegovog roditelja i tako dalje, sve dok ne stigne do samog vrha.

Ovo ponašanje se zove bubljenjem (bubbling) događaja - po analogiji sa bubljenjem mehurića vazduha sa dna. Kao što i mehurić, naš događaj kao da isplivava na površinu, svaki put se odašiljući na višim blokovima.

Samostalno napišite kod koji će demonstrirati bubljenje događaja. Testirajte na njemu bubljenje različitih tipova događaja.

Ne mogu svi događaji da buble. Eksperimentalno pronađite bar jedan događaj koji neće da bubla.