Poganjanje dogodkov v JavaScript

Predstavljajte si, da imate več medsebojno ugnezdenih blokov:

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

Pridobimo reference na naše div elemente v spremenljivke:

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

In sedaj jim dodelimo poslušalce klikov:

elem1.addEventListener('click', function() {
	alert('zelena');
});
elem2.addEventListener('click', function() {
	alert('modra');
});
elem3.addEventListener('click', function() {
	alert('rdeča');
});

Prikažimo naše bloke na zaslonu z dodanimi CSS stilovi:

Kliknite sedaj na najbolj notranji rdeči blok - in videli boste, kako se bo dogodek najprej sprožil v rdečem bloku, nato v modrem, nato v zelenem. In to je logično, saj s klikom na notranji blok, hkrati kliknete na vse zunanje.

To pomeni, da ko kliknete na najbolj notranji blok, se dogodek klika pojavi najprej v njem, nato se sproži v njegovem staršu, v staršu njegovega starša in tako naprej, dokler ne doseže vrha.

To vedenje se imenuje poganjanje (bubbling) dogodkov - po analogiji z mehurčkom zraka, ki se dviga z dna. Prav tako kot mehurček, se tudi naš dogodek kot bi izplaval na vrh, vsakič ko se sproži na višjih blokih.

Samostojno napišite kodo, ki bo demonstrirala poganjanje dogodkov. Preizkusite na njem poganjanje različnih vrst dogodkov.

Vsi dogodki ne morejo plavati. Eksperimentalno poiščite vsaj en dogodek, ki se ne bo poganjal.