Event Bubbling in JavaScript

Stellen Sie sich vor, Sie haben mehrere ineinander verschachtelte Blöcke:

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

Wir holen Referenzen auf unsere Divs in Variablen:

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

Und jetzt hängen wir Click-Event-Handler an sie:

elem1.addEventListener('click', function() {
	alert('grün');
});
elem2.addEventListener('click', function() {
	alert('blau');
});
elem3.addEventListener('click', function() {
	alert('rot');
});

Lassen Sie uns unsere Blöcke mit etwas CSS auf dem Bildschirm anzeigen:

Klicken Sie nun auf den innersten roten Block - und Sie werden sehen, wie das Ereignis zuerst im roten Block ausgelöst wird, dann im blauen, dann im grünen. Und das ist logisch, denn wenn Sie auf den inneren Block klicken, klicken Sie gleichzeitig auf alle äußeren Blöcke.

Das heißt, es stellt sich heraus, dass wenn Sie auf den innersten Block klicken, das Klickereignis zuerst in ihm auftritt, dann wird es in seinem Elternelement ausgelöst, im Elternelement seines Elternelements und so weiter, bis es die Spitze erreicht.

Dieses Verhalten wird Event Bubbling (bubbling) genannt - in Analogie zu einer aufsteigenden Luftblase vom Boden. Genau wie die Blase steigt unser Ereignis sozusagen nach oben und wird jedes Mal auf höheren Blöcken ausgelöst.

Schreiben Sie eigenständig Code, der Event Bubbling demonstriert. Prüfen Sie damit das Bubbling verschiedener Ereignistypen.

Nicht alle Ereignisse können bubbeln. Finden Sie experimentell mindestens ein Ereignis, das nicht bubbeln wird.