2010-10-07 2 views
6

DaWas ist der Unterschied zwischen .delegate() und live()?

$("table").delegate("td", "hover", function(){ 
    $(this).toggleClass("hover"); 
}); 

ist mit dem folgenden Code äquivalent geschrieben mit .Live():

$("table").each(function(){ 
    $("td", this).live("hover", function(){ 
     $(this).toggleClass("hover"); 
    }); 
}); 

nach jQuery API.

Ich wette, ich bin falsch aber ist es nicht das gleiche

$("table td").live('hover', function() {}); 

So zu schreiben, was ist .delegate() für?

+0

möglich Duplikat von [jQuery: live() vs Delegat()] (http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate) –

Antwort

4

.live() lauscht auf document wo als .delegate() auf lokalem Elemente horcht, die <table> in diesem Fall.

Sie beide die gleiche hören für die Ereignisse zu Blasen, die eine auf .delegate() nur Blasen weniger vor gefangen werden.

Ihr Beispiel:

$("table td").live('hover', function() {}); 

Ist das nicht das gleiche, wie es wieder einen Event-Handler zu document und nicht die <table> legt, so .delegate() für mehr lokale Elemente ist, effizienter in den meisten Punkten .. Obwohl es immer noch .live() unter den Deckeln verwendet.


Denken Sie auch daran, dass $(selector) die Elemente abruft, so wählt $("table td") ein Bündel von Elementen wirklich für keinen guten Grund, wenn .live() verwenden, wo als $("table").delegate()nur die <table> Elemente auswählt, so dass selbst zunächst ist es effizienter indem Sie den Selektor nicht ausführen und das Ergebnis verwerfen.

+0

Ist es möglich, den Ereignislistener im Chrome zu sehen Entwicklertools bei der Auswahl des entsprechenden Elements? –

+0

Obwohl '$ (" table td "). Live ('hover', function() {});' ist das selbe, wenn man die '.each()' Methode benutzt, nicht wahr? –

+0

Auf dem Element, das Sie '.delegate()' an yes anhängen, können Sie es im '.data (" events ")' Objekt oder '$ .cache [element [$. Expando]]. Events', wo sehen 'elemenet [$. expando]' ist das 'jquery230420498204824 = 132', das Sie auf dem Element sehen, dass 132 der Schlüssel in' $ .cache' ist, also '$ .cache [132] .ereignisse' ist das Objekt, das Sie sind nach. –

0

Der Doc:

Da die .live() Methode behandelt Ereignisse, sobald sie an die Spitze des Dokuments ausgebreitet haben, ist es nicht möglich Ausbreitung von Live-Events zu stoppen. Ähnlich werden Ereignisse, die von .delegate() behandelt werden, immer an das Element weitergegeben, an das sie delegiert wurden. Event-Handler für alle darunter liegenden Elemente wurden bereits zu dem Zeitpunkt ausgeführt, zu dem der delegierte Event-Handler aufgerufen wird.

5

Die Art und Weise live() Arbeiten ist, dass es einen Handler auf der obersten Ebene des DOM (das Dokument) platziert, die bei der gewählten Veranstaltung auf diesem Niveau sprudelt erkennt (und prüft dann, ob es durch ein geworfen Element, das Ihrem Selektor entspricht).

delegate() funktioniert genauso, aber der Handler wird auf das ausgewählte Element platziert (sodass nur Ereignisse erkannt werden können, die von Nachkommen dieses Elements ausgelöst wurden).

Die Nachteile von live() sind 1) die Performance-Probleme inhärent bei der Erkennung und Überprüfung aller Ereignisse, die Blase auf der Dokumentebene, und 2) die Tatsache, dass Sie die Weitergabe überhaupt auf diese Ereignisse nicht stoppen können Ich weiß von ihnen, bis sie die Dokumentenebene erreicht haben).

delegate() mildert beide Probleme, indem Sie den Handler auf eine kleinere Gruppe von Elementen beschränken (die Elemente, die mit Ihrem Selektor und ihren Nachkommen übereinstimmen) und nicht die ganze Seite.

Verwandte Themen