jQuery-Ereignisbindung und Delegate examples

Die Beispiele in diesem Artikel beschreiben die Bindung und Delegation von jQuery-Ereignissen. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

JQuery-Ereignisbindung und -Delegierung kann mit einer Vielzahl von Methoden implementiert werden: on() , bind() , live() , delegate() und one().

Manchmal binden wir ein Ereignis wie dieses:

Code kopieren Der Code lautet wie folgt:

$("#div1").click(function() { 

warning("Trigger after click"); 

});

Wir können die obige Ereignisbindung auf verschiedene Arten implementieren:

1. am()

Code kopieren Der Code lautet wie folgt:

//Keine Datenparameter 

$("p").on("click", function(){ 

alarm( $(this).text() );
}); 

//Es gibt Datenparameter 

Funktion myHandler(event) { 

Alert(event.data.foo); 

} 

$("p").on("click", {foo: "bar"}, myHandler)

Entsprechend on() ist off(), das zum Entfernen der Ereignisbindung verwendet wird:

Code kopieren Der Code lautet wie folgt:

var foo = function () {

// Code zur Behandlung einer Art Ereignis 

}; 

// ... jetzt wird foo aufgerufen, wenn auf Absätze geklickt wird ... 

$("body").on("click", "p", foo);

// ... foo wird nicht mehr aufgerufen
$("body").off("click", "p", foo);

off(): Entfernen Sie die Bindung durch on()

one(): nur einmal binden.

2. bind()

Parameter: (Typ,[Daten],Funktion(Ereignisobjekt))

Typ: Eine Zeichenfolge, die einen oder mehrere Ereignistypen enthält, wobei mehrere Ereignisse durch Leerzeichen getrennt sind. Zum Beispiel „Klicken“ oder „Senden“ oder ein benutzerdefinierter Ereignisname.

data: Zusätzliches Datenobjekt, das als event.data-Attributwert
an das Ereignisobjekt übergeben wird
fn: Die Handlerfunktion, die an das Ereignis jedes übereinstimmenden Elements
gebunden ist
(Typ,[Daten],false)
Typ: Eine Zeichenfolge, die einen oder mehrere Ereignistypen enthält, wobei mehrere Ereignisse durch Leerzeichen getrennt sind. Zum Beispiel „Klicken“ oder „Senden“ oder ein benutzerdefinierter Ereignisname.
data: Zusätzliches Datenobjekt, das als event.data-Attributwert
an das Ereignisobjekt übergeben wird
false: Wenn Sie den dritten Parameter auf false setzen, wird die Standardaktion deaktiviert.

Mehrere Ereignistypen gleichzeitig binden:

Code kopieren Der Code lautet wie folgt:$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered');

});

Mehrere Ereignistypen/Handler gleichzeitig binden:

Code kopieren Der Code lautet wie folgt:$("button").bind({ click:function(){$("p").slideToggle();},

mouseover:function(){$("body").css("background-color",red");},

mouseout:function(){$("body").css("background-color","#FFFFFF");} 

});

Sie können vor der Ereignisbehandlung einige zusätzliche Daten übergeben.

Code kopieren Der Code lautet wie folgt:Funktionshandler (Ereignis) { Alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

Brechen Sie das Standardverhalten ab und verhindern Sie, dass das Ereignis sprudelt, indem Sie „false“ zurückgeben.

Code kopieren Der Code lautet wie folgt:$("form").bind("submit", function( ) { return false; })

Probleme mit der Bindung

Wenn die Tabelle 10 Spalten und 500 Zeilen enthält, an die Klickereignisse gebunden sind, führt das Suchen und Durchlaufen von 5000 Zellen zu einer erheblichen Verlangsamung der Skriptausführungsgeschwindigkeit, und das Speichern von 5000 td-Elementen und entsprechenden Ereignishandlern dauert ebenfalls Es wird viel Speicher benötigt (ähnlich wie wenn alle physisch an der Tür stehen und auf eine Lieferung warten).

Wenn wir basierend auf dem vorherigen Beispiel eine einfache Fotoalbumanwendung implementieren möchten, werden auf jeder Seite nur Miniaturansichten von 50 Fotos (50 Zellen) angezeigt, und der Benutzer kann auf den Link „Seite x“ (oder „Nächste Seite“) klicken Laden Sie weitere 50 Fotos dynamisch über Ajax vom Server. In diesem Fall scheint das Binden von Ereignissen für 50 Zellen mithilfe der Methode .bind() wieder akzeptabel zu sein.

Das ist nicht der Fall. Durch die Verwendung der Methode .bind() werden Klickereignisse nur an 50 Zellen auf der ersten Seite gebunden. Zellen in nachfolgenden Seiten, die dynamisch geladen werden, verfügen nicht über dieses Klickereignis. Mit anderen Worten: .bind() kann Ereignisse nur an Elemente binden, die zum Zeitpunkt des Aufrufs bereits vorhanden sind, und keine Ereignisse an Elemente binden, die in der Zukunft hinzugefügt werden (ähnlich wie neue Mitarbeiter keine Expresszustellung erhalten können).

Die Veranstaltungsdelegation kann die beiden oben genannten Probleme lösen. Verwenden Sie speziell für den Code einfach die in jQuery 1.3 neu hinzugefügte Methode .live() anstelle der Methode .bind():

Code kopieren Der Code lautet wie folgt:

$("#info_table td").live("click", function() {/*Mehr Informationen anzeigen*/});

Die .live()-Methode bindet hier das Klickereignis an das $(document)-Objekt (dies kann jedoch nicht im Code widergespiegelt werden). Dies ist auch ein wichtiger Grund, warum die .live()-Methode kritisiert wurde. Wir werden darüber diskutieren im Detail später), und Sie müssen $(document) nur einmal binden (nicht 50 Mal, geschweige denn 5000 Mal), und dann können Sie das Klickereignis der nachfolgenden dynamisch geladenen Fotozelle verarbeiten. Beim Empfang eines Ereignisses überprüft das Objekt $(document) den Ereignistyp und das Ereignisziel. Wenn es sich um ein Klickereignis handelt und das Ereignisziel td ist, wird der an es delegierte Handler ausgeführt.

unbind(): Entfernt die von bind durchgeführte Bindung.

3. live()

Bisher scheint alles perfekt zu sein. Leider ist dies nicht der Fall. Da die .live()-Methode nicht perfekt ist, weist sie die folgenden großen Mängel auf:
Die Funktion $() findet alle td-Elemente auf der aktuellen Seite und erstellt jQuery-Objekte. Diese td-Elementsammlung wird jedoch nicht zum Bestätigen des Ereignisziels verwendet. Stattdessen wird ein Selektorausdruck zum Vergleich mit event.target oder seinem Vorfahren verwendet Elemente, daher verursacht das Generieren dieses jQuery-Objekts unnötigen Overhead; Standardmäßig sind Ereignisse an das Element $(document) gebunden. Wenn die verschachtelte DOM-Struktur sehr tief ist, führen Ereignisse, die durch eine große Anzahl von Vorgängerelementen sprudeln, zu Leistungseinbußen Es kann nur nach dem direkt ausgewählten Element platziert werden und kann nicht nach der aufeinanderfolgenden DOM-Traversal-Methode verwendet werden, d. h. $("#info_table td").live... kann verwendet werden, aber $("#info_table") .find("td" ).live...Nein;
Sammeln Sie td-Elemente und erstellen Sie jQuery-Objekte, aber die eigentliche Operation ist das $(document)-Objekt, was rätselhaft ist.
Die Lösung
Um die Generierung unnötiger jQuery-Objekte zu vermeiden, können Sie einen Hack namens „early delegation“ verwenden, der darin besteht, .live() außerhalb der Methode $(document).ready() aufzurufen:

Code kopieren Der Code lautet wie folgt:(function($){

$("#info_table td").live("click",function(){/*Mehr Informationen anzeigen*/});

})(jQuery);

Hier ist (function($){...})(jQuery) eine „anonyme Funktion, die sofort ausgeführt wird“ und einen Abschluss bildet, um Namenskonflikte zu vermeiden. Innerhalb der anonymen Funktion verweist der $parameter auf das jQuery-Objekt. Diese anonyme Funktion wartet nicht, bis das DOM bereit ist, bevor sie ausgeführt wird. Beachten Sie, dass bei Verwendung dieses Hacks das Skript im Head-Element der Seite verlinkt und/oder ausgeführt werden muss. Der Grund für die Wahl dieses Zeitpunkts besteht darin, dass das Dokumentelement zu diesem Zeitpunkt verfügbar ist und das gesamte DOM noch lange nicht generiert ist. Wenn das Skript vor dem schließenden Body-Tag platziert wird, macht es keinen Sinn, da das DOM vollständig ist zu diesem Zeitpunkt verfügbar.

Um Leistungseinbußen durch Event-Bubbling zu vermeiden, unterstützt jQuery ab 1.4 die Verwendung eines Kontextparameters bei Verwendung der .live()-Methode:

Code kopieren Der Code lautet wie folgt:$("td",$("#info_table")[0 ]). live("click",function(){/*Mehr Informationen anzeigen*/});

Auf diese Weise ändert sich der „Treuhänder“ vom Standardwert $(document) zu $("#info_table")[0], wodurch die Blasenfahrt vermieden wird. Der mit .live() verwendete Kontextparameter muss jedoch ein separates DOM-Element sein, daher wird das Kontextobjekt hier mit $("#info_table")[0] angegeben, das mit dem Array-Index-Operator abgerufen wird.

4. Delegate()

Wie bereits erwähnt, führte jQuery 1.3 die Methode .live() ein, um die Einschränkungen der einzelnen .bind()-Methode zu überwinden und die Ereignisdelegation zu implementieren. Um das Problem einer zu langen „Ereignisausbreitungskette“ zu lösen, unterstützte jQuery 1.4 später die Angabe von Kontextobjekten für die .live()-Methode. Um das Problem der unnötigen Generierung von Elementsammlungen zu lösen, hat jQuery 1.4.2 einfach eine neue Methode.delegate() eingeführt.

Mit .delegate() kann das vorherige Beispiel wie folgt geschrieben werden:

Code kopieren Der Code lautet wie folgt:

$("#info_table").delegate("td"," click", function(){/*Mehr Informationen anzeigen*/});

Die Verwendung von .delegate() hat die folgenden Vorteile (oder löst die folgenden Probleme der .live()-Methode):
Binden Sie den Zielelementselektor („td“), das Ereignis („click“) und den Handler direkt an den „Dragee“ $ („#info_table“), ohne zusätzliche Sammlung von Elementen, verkürzten Ereignisausbreitungspfad und klare Semantik; >

Unterstützt den Aufruf nach verketteten DOM-Traversal-Methoden, d. h. unterstützt $("table").find("#info").delegate... und unterstützt eine präzise Steuerung;

Es ist ersichtlich, dass die Methode .delegate() eine relativ perfekte Lösung ist. Wenn die DOM-Struktur jedoch einfach ist, kann auch .live() verwendet werden.

Tipp: Wenn Sie die Ereignisdelegierung verwenden und andere im Zielelement registrierte Ereignishandler .stopPropagation() verwenden, um die Ereignisweitergabe zu verhindern, wird die Ereignisdelegierung ungültig.

undelegate(): Entfernen Sie die Bindung von Delegate

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

jQuery-Ereignisbindung und Delegate examples_jquery