Bublanie udalostí v JavaScripte

Predstavte si, že máte niekoľko vnorených blokov:

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

Získame odkazy na naše divy do premenných:

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

A teraz na ne pridáme obsluhy kliknutí:

elem1.addEventListener('click', function() {
	alert('zelený');
});
elem2.addEventListener('click', function() {
	alert('modrý');
});
elem3.addEventListener('click', function() {
	alert('červený');
});

Zobrazíme naše bloky na obrazovke, pridaním nejakého CSS:

Kliknite teraz na najvnútornejší červený blok - a uvidíte, ako udalosť najprv zbehne v červenom bloku, potom v modrom, potom v zelenom. A to je logické, pretože kliknutím na vnútorný blok zároveň klikáte na všetky vonkajšie.

To znamená, že keď kliknete na najvnútornejší blok, udalosť kliknutia vznikne najprv v ňom, potom sa spustí v jeho rodičovi, v rodičovi jeho rodiča a tak ďalej, kým nedosiahne úplný vrchol.

Toto správanie sa nazýva bublanie (bubbling) udalostí - analogicky s bublinkou vzduchu, ktorá stúpa zo dna. Rovnako ako bublina, naša udalosť akoby vyplávala nahor, zakaždým sa spúšťajúc na vyšších blokoch.

Samostatne napíšte kód, ktorý bude demonštrovať bublanie udalostí. Otestujte na ňom bublanie rôznych typov udalostí.

Nie všetky udalosti dokážu bublať. Experimentálne najdite aspoň jednu udalosť, ktorá nebude bublať.