Sündmuste peatumine JavaScriptis

Kujutage ette, et teil on mitu üksteise sisse pandud plokki:

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

Hankige oma div'ide viited muutujatesse:

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

Ja nüüd lisame neile klikirakendajad:

elem1.addEventListener('click', function() {
	alert('roheline');
});
elem2.addEventListener('click', function() {
	alert('sinine');
});
elem3.addEventListener('click', function() {
	alert('punane');
});

Kuvame oma plokid ekraanile, lisades neile mõnda CSS-i:

Klõpsake nüüd kõige sisemisel punasel plokil - ja näete, kuidas sündmus kõigepealt käivitub punasel plokil, siis sinisel, siis rohelisel. Ja see on loogiline, sest klõpsates sisemisele plokile, klõpsate samal ajal kõikidele välistele plokkidele.

See tähendab, et kui klõpsate kõige sisemist plokki, tekib kliki sündmus kõigepealt selles, seejärel käivitub selle vanemas, selle vanema vanemas ja nii edasi, kuni jõuab kõige tipuni.

Sellist käitumist nimetatakse sündmuste peatumiseks (bubbling) - analoogia põhjal õhumulli põhjast üles hõljumisega. Nagu mull, hõljub ka meie sündmus justkui ülespoole, iga kord käivitudes kõrgematel plokkidel.

Kirjutage iseseisvalt kood, mis demonstreerib sündmuste peatumist. Testige sellel erinevat tüüpi sündmuste peatumist.

Kõik sündmused ei põhjusta peatumist. Katsetades leidke vähemalt üks sündmus, mis ei too kaasa peatumist.