wake-up-neo.net

JQuery Live () gegen Delegierte ()

Ich habe hier und an anderer Stelle im Internet einige Posts über die Unterschiede zwischen live() und delegate() gelesen. Ich habe jedoch die gesuchte Antwort nicht gefunden.

Ich weiß, dass der Unterschied zwischen live und delegate darin besteht, dass live nicht in einer Kette verwendet werden kann. Ich habe auch irgendwo gelesen, dass delegate in einigen Fällen schneller ist (bessere Leistung).

Meine Frage ist, gibt es eine Situation, in der Sie live anstelle von delegate verwenden sollten?

[~ # ~] Update [~ # ~]

Ich habe einen einfachen Test eingerichtet, um den Leistungsunterschied festzustellen.

Ich habe auch die neue Funktion .on() hinzugefügt, die in jQuery 1.7+ verfügbar ist

Die Ergebnisse fassen die Leistungsprobleme, wie in den Antworten angegeben, ziemlich gut zusammen.

  • Verwenden Sie .live() nur, wenn Ihre jQuery-Version .delegate() nicht unterstützt.
  • Verwenden Sie .delegate() nur, wenn Ihre jQuery-Version .on() nicht unterstützt.

Der Unterschied zwischen .live() und .delegate() ist VIEL größer als zwischen delegate() und .on().

jquerylive
102
PeeHaa

Ich benutze niemals live; Ich halte die Vorteile der Verwendung von delegate für so erheblich, dass sie überwältigend sind.

Der einzige Vorteil von live ist, dass seine Syntax der von bind sehr nahe kommt:

$('a.myClass').live('click', function() { ... });

delegate verwendet jedoch eine etwas ausführlichere Syntax:

$('#containerElement').delegate('a.myClass', 'click', function() { ... });

Dies scheint mir jedoch viel expliziter zu sein, was tatsächlich passiert. Aus dem Beispiel live geht nicht hervor, dass die Ereignisse tatsächlich in document erfasst werden. mit delegate ist klar, dass die Ereigniserfassung auf #containerElement erfolgt. Sie können dasselbe mit live tun, aber die Syntax wird immer schrecklicher.

Das Angeben eines Kontexts für die Erfassung Ihrer Ereignisse verbessert auch die Leistung. Im Beispiel live muss jeder einzelne Klick auf das gesamte Dokument mit dem Selektor a.myClass Verglichen werden, um festzustellen, ob er übereinstimmt. Bei delegate sind das nur die Elemente innerhalb von #containerElement. Dies wird offensichtlich die Leistung verbessern.

Schließlich erfordert live, dass Ihr Browser nach a.myClass sucht, ob es derzeit existiert oder nicht . delegate sucht nur nach den Elementen, wenn die Ereignisse ausgelöst werden, was einen weiteren Leistungsvorteil ergibt.

NB delegate verwendet live hinter den Kulissen, sodass Sie mit live alles tun können, was Sie mit delegate tun können. Meine Antwort befasst sich mit ihnen, wie sie allgemein verwendet werden.

Beachten Sie auch, dass weder live noch delegate der beste Weg ist, eine Ereignisdelegierung in modernem jQuery durchzuführen. Die neue Syntax (ab jQuery 1.7) lautet mit der Funktion on . Die Syntax lautet wie folgt:

$('#containerElement').on('click', 'a.myClass', function() { ... });
147
lonesomeday

Sie sind genau gleich, außer:

  • Mit .delegate() können Sie den lokalen Bereich der Seite eingrenzen, während .live() Ereignisse auf der gesamten Seite verarbeiten muss.
  • .live() beginnt mit einer verschwendeten DOM-Auswahl

Wenn Sie .delegate() aufrufen, dreht es sich nur um und ruft .live() auf, übergibt jedoch den zusätzlichen Kontextparameter .

https://github.com/jquery/jquery/blob/master/src/event.js#L948-95

Als solches würde ich immer .delegate() verwenden. Wenn Sie wirklich alle Ereignisse auf der Seite verarbeiten müssen, geben Sie einfach body als Kontext an.

$(document.body).delegate('.someClass', 'click', function() {
    // run handler
});

Ältere Versionen von jQuery haben tatsächlich die Funktionalität delegate. Sie müssen nur einen Selektor oder ein Element als Kontexteigenschaft übergeben, wenn Sie .live() aufrufen. Natürlich muss es auf der Seite geladen werden.

$('.someClass', '#someContainer').live('click',function() {
    // run handler
});

Und Sie haben das gleiche Verhalten wie .delegate().

24
user113716

Zwei Situationen kommen in den Sinn:

  1. Sie würden delegate für das body -Element verwenden, also können Sie stattdessen einfach live verwenden, da dies einfacher ist.

  2. Sie müssen eine ältere Version der jQuery-Bibliothek verwenden, in der das Ereignis delegate noch nicht implementiert ist.

3
Guffa

Betrachten Sie dieses Beispiel

<ul id="items">  
   <li> Click Me </li>  
</ul>

$('#items').delegate('li', 'click', function() {  
    $(this).parent().append('<li>New Element</li>');  
});

Indem wir ein DOM-Element als Kontext für unseren Selektor übergeben, können wir dafür sorgen, dass sich Live () (fast) so verhält wie delegate (). Der Handler wird an den Kontext und nicht an das Dokument angehängt. Dies ist der Standardkontext. Der folgende Code entspricht der oben gezeigten Version von delegate ().

$("li", $("#items")[0]).live("click", function() {  
    $(this).parent().append("<li>New Element</li>");  
});

Ressource

Sie sollten jedoch besser delegieren, um eine bessere Leistung zu erzielen siehe hier

2
Misagh Aghakhani