Event Bubbling in JavaScript

Stel je voor dat je meerdere geneste blokken hebt:

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

Laten we verwijzingen naar onze div's in variabelen zetten:

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

En nu voegen we click event handlers aan ze toe:

elem1.addEventListener('click', function() {
	alert('groen');
});
elem2.addEventListener('click', function() {
	alert('blauw');
});
elem3.addEventListener('click', function() {
	alert('rood');
});

Laten we onze blokken op het scherm tonen, door wat CSS toe te voegen:

Klik nu op het meest innerlijke rode blok - en je zult zien dat de event eerst wordt geactiveerd in het rode blok, dan in het blauwe, en daarna in het groene. En dit is logisch, want door op het innerlijke blok te klikken, klik je tegelijkertijd op alle outerlijke blokken.

Het blijkt dus dat wanneer je klikt op het meest innerlijke blok, de click event ontstaat eerst daarin, wordt dan geactiveerd in zijn parent, in de parent van zijn parent, en zo verder, totdat het de top bereikt.

Dit gedrag wordt bubbling (bubbling) van events genoemd - naar analogie met het opstijgen van een luchtbel vanaf de bodem. Net als een luchtbel, lijkt onze event naar boven te "drijven", en wordt elke keer geactiveerd op hogere blokken.

Schrijf zelfstandig code die event bubbling demonstreert. Test er het bubbelen van verschillende soorten events mee.

Niet alle events kunnen bubbelen. Zoek experimenteel minstens één event dat niet bubbelt.