JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

gespeichert.
Die
handler
-Funktion wird an das Click-Event jedes Elements in der Collection gebunden.
    Würde JavaScript/jQuery deklarativ interpretiert werden, würde der eben angeführte Code Folgendes bedeuten:
    Immer, wenn ein Element mit der CSS-Klasse
clickable
angeklickt wird, führt die Funktion
handler
aus.
    Da JavaScript/jQuery aber imperativ interpretiert wird, werden nur die Elemente gebunden, die den Selektor zum Zeitpunkt der Ausführung der Anweisung erfüllen. Fügen Sie neue Elemente mit einer Klasse
clickable
hinzu oder entfernen Sie die Klasse von einem Element, dann ändert sich das Verhalten für diese Elemente überhaupt nicht.
    Eine kleine Einführung in die Event-Delegation
    Die Event-Delegation besteht aus einem Binden beim Start der Seite. Danach wird nur noch passiv auf die Events gelauscht, die gebunden sind. Dieser Ansatz baut darauf auf, dass viele Events im Browser nach oben steigen.
    Klicken Sie zum Beispiel auf ein

, dann erhält der übergeordnete Knoten ebenfalls das Click-Event, dieser gibt es wiederum nach oben und so weiter, bis das Element
document
erreicht wird.
    Vor- und Nachteile jeder Lösung
    Rebinding
    Das Rebinding ist einfach: Sie fügen schlicht die Eventhandler erneut hinzu. Das führt zu neuen Problemen, so werden zum Beispiel Elementen Eventhandler hinzugefügt, die schon gebunden waren. Manche fügen den Elementen CSS-Klassen hinzu, um dieses Problem zu umgehen (sie markieren damit die schon gebundenen Elemente).
    Dies alles sorgt bei jeder Aktualisierung für CPU-Last und es werden mehr und mehr Eventhandler erzeugt.
    Man kann beide Probleme umgehen, indem man benannte Funktionen als Eventhandler verwendet. Wenn Sie immer die gleiche Funktion nutzen, haben Sie das Verdopplungs-Problem gelöst und der Overhead ist kleiner.
    Trotzdem kann das Rebinding mit der Zeit zu einem immer größeren Speicherverbrauch führen.
    Event-Delegation
    Bei der Event-Delegation benötigt man nur ein initiales Binding und muss sich nicht dauernd mit dem Rebinding befassen. Das ist für den Entwickler sehr befreiend und der Code wird kürzer und klarer. Das oben erwähnte Speicher-Problem tritt so auch nicht auf. Der Inhalt der Seite kann sich ändern, aber die aktiven Eventhandler bleiben immer gleich.
    Aber die Event-Delegation hat auch einen Nachteil. Damit sie funktioniert, muss der entsprechende Code (
live()
, ein Plugin oder Ihr eigener Code) das Element nehmen, das das Event erhalten hat (
event.target
), und seine übergeordneten Elemente durchsuchen, um herauszufinden, welche Eventhandler besitzen, um die weitere Verarbeitung auszulösen. Das heißt, dass bei der Event-Delegation weniger Bindings notwendig sind, aber bei jedem ausgelösten Event der Aufwand höher ist.
    Zudem kann die Event-Delegation nicht genutzt werden, wenn die betreffenden Events nicht aufsteigen, wie zum Beispiel bei
focus
und
blur
. Bei diesen Events gibt es einen Workaround, der Browser-übergreifend funktioniert – die Events
focusin
und
focusout
.
    Ergebnis
    Die Event-Delegation scheint der schönere Ansatz zu sein, aber sie erfordert zusätzlichen Verarbeitungsaufwand.
    Ich empfehle hier, Live-Bindings nur zu verwenden, wenn Sie sie wirklich brauchen. Das sind die beiden häufigsten Situationen:
    Dynamische Elemente
Sie haben eine Liste mit DOM-Elementen, die dynamisch geändert wird.
    Große Listen
Die Event-Delegation kann schneller arbeiten, wenn Sie ein Live-Binding nutzen anstatt zum Beispiel 100 normale Bindings. Das sorgt für einen schnelleren Start und es erfordert weniger Speicher.
    Wenn es keinen Grund gibt,
live()
zu nutzen, dann nehmen Sie lieber
bind()
. Brauchen Sie die Live-Variante, dann sollten die Änderungen kein großes Problem sein.
    ----
    [ 1 ] http://de.wikipedia.org/wiki/Ereignis_(Programmierung)
    [ 2 ] http://docs.jquery.com/Events/jQuery.Event#event.data
    [ 3 ] http://docs.jquery.com/Events/jQuery.Event
    [ 4 ] http://docs.jquery.com/Events/live
    [ 5 ] http://plugins.jquery.com/project/LiveQuery
    [ 6 ] http://plugins.jquery.com/project/ElementReady
    [ 7 ] http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
    [ 8 ] http://docs.jquery.com/Events/jQuery.Event#event.stopImmediatePropagation.28.29
    [ 9 ] http://www.w3.org/TR/DOM-Level-3-Events/
    [ 10 ] http://docs.jquery.com/Events/jQuery.Event#event.isImmediatePropagationStopped.28.29
    [ 11 ] http://docs.jquery.com/Events/jQuery.Event#event.target
    [ 12 ] http://docs.jquery.com/Traversing/closest
    [ 13