Ereignisweiterleitung

Ereignisweiterleitung beschreibt, wie ein Ereignis nach seiner Auslösung durch den DOM wandert. Sie umfasst drei verschiedene Phasen: Capturing, Target und Bubbling-Phasen.

Capturing-Phase (Capture)

Das Ereignis beginnt am Wurzelknoten des DOM-Baums (window) und bewegt sich abwärts zum Zielelement. Ereignis-Listener in dieser Phase fangen das Ereignis ab, während es nach unten wandert.

Target-Phase

Das Ereignis erreicht das Zielelement (das Element, das das Ereignis ausgelöst hat). Hier werden die an das Zielelement selbst gebundenen Ereignis-Listener ausgeführt.

Bubbling-Phase (Bubble)

Nachdem das Zielelement erreicht wurde, bewegt sich das Ereignis wieder nach oben durch den DOM-Baum zum Wurzelknoten (window) und durchläuft dabei die Elternelemente. Dies ist die am häufigsten genutzte Phase und ermöglicht es Elternelementen, auf von Kindelementen ausgelöste Ereignisse zu reagieren.

Das Ereignis propagiert durch das DOM, wenn auf den button geklickt wird. Zuerst wird das Ereignis auf dem button ausgelöst (Zielphase), dann steigt es zur inneren div und schließlich zur äußeren div auf (Bubbling-Phase).

Ereignisdelegation

Ereignisdelegation ist eine Technik, die die Ereignispropagation nutzt, um Ereignisse von Kindelementen mit einem einzigen Ereignis-Listener am Elternelement zu behandeln. Anstatt jedem Kindelement einen eigenen Listener zuzuweisen, hört das Elternelement auf Ereignisse, die von seinen Kindern nach oben propagieren. Diese Methode bietet zwei Hauptvorteile:

1. Performance: Die Reduzierung der Anzahl von Ereignis-Listenern verbessert die Performance, insbesondere wenn Elemente dynamisch erstellt werden (z. B. eine Liste, die wächst, wenn neue Einträge hinzugefügt werden);
2. Wartbarkeit: Ereignisdelegation vereinfacht den Code, besonders bei großen DOM-Strukturen oder dynamischen Inhalten.

Anstatt jedem einzelnen button-Element einen eigenen Klick-Listener hinzuzufügen, wird ein einziger Listener am übergeordneten div-Element angebracht. Das Ereignis steigt von den button-Elementen zum div auf, wo es verarbeitet wird.

Schlechter Ansatz

Guter Ansatz

Praktisches Beispiel: Umgang mit dynamischen Listen

Event-Delegation eignet sich ideal zur Verwaltung von Interaktionen in Listen oder Tabellen, die im Laufe der Zeit wachsen können (z. B. das Hinzufügen von Aufgaben zu einer To-Do-Liste oder Produkten zu einem Warenkorb). Während Elemente hinzugefügt oder entfernt werden, übernimmt das übergeordnete Container-Element (wie ul oder table) die gesamte Interaktion, wodurch das Anfügen oder Entfernen von Event-Listenern an jedem Kindelement entfällt.