Event bubbling i JavaScript

Forestil dig, at du har flere blokke indlejret i hinanden:

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

Lad os hente referencer til vores div'er i variabler:

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

Og nu tilføjer vi klik-handlers til dem:

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

Lad os vise vores blokke på skærmen ved at tilføje noget CSS:

Klik nu på den mest indvendige røde blok - og du vil se, hvordan begivenheden først udløses i den røde blok, derefter i den blå, derefter i den grønne. Og det er logisk, for når du klikker på den indre blok, klikker du samtidig på alle de ydre blokke.

Det viser sig, at når du klikker på den mest indvendige blok, opstår klikbegivenheden først i den, derefter udløses den i dens forælder, i forælderen til dens forælder og så videre, indtil den når til toppen.

Denne opførsel kaldes bobling (bubbling) af events - i analogi med en luftboble, der stiger op fra bunden. Ligesom boblen, synes vores begivenhed at svæve opad og udløses hver gang på de højere blokke.

Skriv selv kode, som vil demonstrere event bubbling. Test bobling af forskellige typer af begivenheder på den.

Ikke alle begivenheder kan boble. Find eksperimentelt mindst en begivenhed, som ikke vil boble.