JavaScript/Tutorials/Eventhandler für eingefügte Elemente

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bei der Registration eines Eventhandlers wird eine Liste von Elementen erstellt, die auf ein bestimmtes Ereignis reagieren sollen.

Beispiel: JQuery
$(".close").click(function() { /* do something */ });
Überwache alle Klick-Ereignisse auf Elemente der Klasse „close“.


Werden nachträglich Elemente in das Dokument eingefügt, so wird die erstellte Liste nicht verändert, das neu eingefügte Element reagiert nicht auf das bestimmte Ereignis.

Beispiel: JQuery
$("#container").append('<div class="close">X</div>');
In das Element mit der ID „container“ wird ein Element der Klasse „close“ eingefügt.


Das Problem lässt sich mit Bubbling#Der_Ereignisfluss_.28Event_Flow.29 Event Delegation lösen. Dabei wird ein Event-Handler bei einem gemeinsamen Elternelement registriert und ausgenutzt, dass die Events vom Zielelement im DOM-Baum (wie Luftblasen in einer Flüssigkeit, deshalb bubbling genannt) nach oben aufsteigen.

Beispiel: JQuery
$("#container").on('click', '.close', function() { /* do something */ });
Überwache alle Klick-Ereignise auf das Element mit der ID „container“. Wenn ein Nachfahren-Element von #container geklickt wurde, auf das der Selektor .close zutrifft, so rufe die Handler-Funktion auf.

Wenn sich das Element #container die ganze Zeit im Dokument befindet, betrifft dieses Event-Handling alle Elemente, auf die der Selektor zutrifft. Egal, ob sie sich bereits im DOM befinden oder erst zukünftig eingefügt werden.

Der Vorteil von Event-Delegation ist, dass nicht bei jedem Element, bei dem der Event passieren kann, einzeln ein Handler registriert werden muss.