Hendelsesbobling i JavaScript

Tenk deg at du har flere blokker som er nestet inni hverandre:

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

La oss hente referanser til div'ene våre i variabler:

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

Og nå legger vi til klikk-handterere på dem:

elem1.addEventListener('click', function() {
	alert('grønn');
});
elem2.addEventListener('click', function() {
	alert('blå');
});
elem3.addEventListener('click', function() {
	alert('rød');
});

La oss vise blokkene våre på skjermen ved å legge til litt CSS:

Klikk nå på den innerste røde blokken - og du vil se at hendelsen først utløses i den røde blokken, deretter i den blå, og deretter i den grønne. Og dette er logisk, for når du klikker på den innerste blokken, klikker du samtidig på alle de ytre blokkene.

Det vil si at når du klikker på den innerste blokken, oppstår klikk-hendelsen først i den, deretter utløses den i dens forelder, i forelderen til dens forelder, og så videre, inntil den når helt til topps.

Dette oppførselen kalles hendelsesbobling (bubbling) - analogt med hvordan en luftboble stiger opp fra bunnen. Akkurat som boblen, "svømmer" hendelsen vår oppover, og utløses hver gang på høyere og høyere blokker.

Skriv koden som vil demonstrere hendelsesbobling selv. Test bobling av ulike hendelsestyper på den.

Ikke alle hendelser kan boble. Finn eksperimentelt minst én hendelse som ikke vil boble.