Ereignisausbreitung und Delegierung

Ereignisweitergabe

Ereignisweitergabe beschreibt, wie ein Ereignis nach seiner Auslösung durch das DOM bewegt wird, und es gibt drei verschiedene Phasen: Erfassungsphase, Zielphase und Blasenphase.

Erfassungsphase (Capture)

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

Zielphase

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

Blasenphase (Bubble)

Nachdem das Zielelement erreicht wurde, beginnt das Ereignis, sich wieder nach oben durch den DOM-Baum zur Wurzel (window) zu bewegen und durchläuft dabei übergeordnete Elemente. Dies ist die am häufigsten verwendete Phase, die es übergeordneten Elementen ermöglicht, auf Ereignisse zu reagieren, die von Kindelementen ausgelöst werden.

Das Ereignis breitet sich durch das DOM aus, wenn der button geklickt wird. Zuerst wird das Ereignis auf dem button ausgelöst (Zielphase), dann steigt es zum inneren div auf und schließlich zum äußeren div (Blasenphase).

Ereignisdelegation

Ereignisdelegation ist eine Technik, die die Ereignisausbreitung nutzt, um Ereignisse von Kindelementen mit einem einzigen Ereignislistener auf einem Elternelement zu behandeln. Anstatt individuelle Listener an jedes Kind anzuhängen, hört ein Elternelement auf Ereignisse, die von seinen Kindern nach oben blubbern. Dieser Ansatz hat zwei Hauptvorteile:

1. Leistung: Die Reduzierung der Anzahl von Ereignislistenern verbessert die Leistung, insbesondere in Situationen, in denen Elemente dynamisch erstellt werden (z. B. eine Liste, die wächst, wenn neue Elemente hinzugefügt werden);
2. Wartbarkeit: Die Ereignisdelegation vereinfacht den Code, insbesondere beim Arbeiten mit großen DOM-Strukturen oder dynamischen Inhalten.

Anstatt jedem button-Element einzeln Klick-Listener hinzuzufügen, wird ein einzelner Listener dem div-Elternelement hinzugefügt. Das Ereignis blubbert von den button-Elementen zum div, wo es behandelt wird.

Schlechter Ansatz

Guter Ansatz

Praktisches Beispiel: Umgang mit dynamischen Listen

Ereignisdelegation ist perfekt für die 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 Einkaufswagen). Wenn Elemente hinzugefügt oder entfernt werden, übernimmt das übergeordnete Container-Element (wie ul oder table) alle Interaktionen, wodurch das Anfügen oder Entfernen von Listenern an jedes Kindelement überflüssig wird.