Javascript Event Delegation

Event Delegation

Event Delegation ist ein Muster für eine Vorgehensweise, die einem »Abgesandten« den eventListener zuschiebt, so dass eine ganze Reihe von Elementen auf gleiche Art behandelt werden kann.

Event Delegation macht sich das Event Bubbling zunutze: Events steigen von einem Element in der Bubbling-Phase über alle übergeordneten Elemente bis zum root-Element auf.

Bei einer langen Liste von Elementen, die bei einem Event in ähnlicher Weise behandelt werden, muss nicht jedes Event in einem eigenen Skript behandelt werden. Statt dessen beobachtet der eventListener ein im DOM-Baum übergeordnetes Element, das alle Elemente der Liste enthält.

✕

✕

✕

✕

const gallery = document.querySelector (".gallery");

gallery.addEventListener ("click", (evt) => {
	console.log (evt.target);
	if (evt.target.className === "del") {
		evt.target.closest (".flower").remove ();
	}
});

Bei einem Klick auf das gallery-Element prüft evt.target.className, ob ein Element mit der CSS-Klasse del vorliegt. Wenn das der Fall ist, greift evt.target.parentElement auf das umfassende Element zu, also auf das div-Element mit der CSS-Klasse flower. remove () löscht das Element.

stopPropagation

Es gibt aber Situationen, in denen die Erkennung eines Events schon in der Capture-Phase eine wichtige Rolle spielt. Auf dem Weg nach unten kann stopPropagation das Event unterbinden, so dass es nicht bis zum Zeile – zum Event Target – vordringt.

let b1 = document.querySelector("#b1");
b1.addEventListener ("click", function (){
   b1.classList.toggle ("red");
   }
);

let stopit = document.querySelector("#buttons");
stopit.addEventListener("click", function (eve) {
   eve.stopPropagation ();
}, true)

Die Weiterleitung des Events wird unterbunden, das Event kommt niemals bei seinem eigentlichen Event Target an. Zu einer Bubble-Phase kommt es auch nicht mehr. Finito.

Oft werden sowohl bubble als auch capture ausgeschaltet, damit es nicht zu unvorhergesehenen Aktionen kommt. Dafür gibt es das stopPropagation() sowohl für die modernen Browser als auch für IE.

DOM: Event stopPropagation()

Stopt den Ereignis-Fluss. Kann entweder in der Capture- oder in der Bubble-Phase benutzt werden.

IE: stopPropagation()

In IE ist stopPropagation() keine Methode, sondern eine Boole'sche Eigenschaft, die auf true gesetzt wird, damit das Ereignis nicht aufsteigt (bubbling)

Auch wenn wir bubble in den meisten Fällen gern abschalten würden, kann das zu unvorhergesehenen Fehlern führen. Vielleicht hängt ein Plugin vom Event ab …?