Analyse der Unterschiede zwischen .bind(), .live() und .delegate() in jQuery

Analyse der Unterschiede zwischen .bind(), .live() und .delegate() in

jQuery Freunde, die jQuery lernen, können sich darauf beziehen.

DOM-Baum

Zunächst ist es hilfreich, den DOM-Baum eines HTML-Dokuments zu visualisieren. Eine einfache HTML-Seite sieht so aus:

Ereignisse Blase (auch bekannt als Ereignisausbreitung)

Wenn wir auf einen Link klicken, löst dies das Klickereignis des Linkelements aus, das die Ausführung aller Funktionen auslöst, die wir an das Klickereignis dieses Elements gebunden haben.

Der Code lautet wie folgt:

$('a').bind('click',function(){alert('that tickles!')})

Ein Klickvorgang löst also die Ausführung der Alarmfunktion aus.

Das Klickereignis breitet sich dann zur Wurzel des Baums aus, sendet es an das übergeordnete Element und dann an jedes Vorgängerelement, sofern es sich um einen einzelnen Klick handelt eines seiner Nachkommenelemente. Wenn das Klickereignis ausgelöst wird, wird das Ereignis an dieses übergeben.

Im Kontext der Manipulation des DOM ist Dokument der Wurzelknoten.

Jetzt können wir die Unterschiede zwischen .bind(), .live() und .delegate() einfacher erklären.
.bind()

Der Code lautet wie folgt:

$('a').bind('click',function(){alert('Das kitzelt !') ;})

Dies ist die einfachste Bindungsmethode. JQuery durchsucht das Dokument nach allen $('a')-Elementen und bindet die Warnfunktion an das Klickereignis jedes Elements.
.live()

Der Code lautet wie folgt:

$('a').live('click',function(){alert('Das kitzelt !') })

JQuery bindet die Alarmfunktion an das $(document)-Element und verwendet „click“ und „a“ als Parameter. Immer wenn ein Ereignis zum Dokumentknoten aufsteigt, prüft es, ob es sich um ein Klickereignis handelt und ob das Zielelement des Ereignisses mit dem „a“ CSS-Selektor übereinstimmt. Wenn ja, führen Sie die Funktion aus.
Die Live-Methode kann auch an ein bestimmtes Element (oder einen „Kontext“) anstelle des Dokuments gebunden werden, wie folgt:

Der Code lautet wie folgt:

$ ('a ',$('#container')[0]).live('click',function(){alert('Das kitzelt!')})

.delegate()

Der Code lautet wie folgt:

$('#container').delegate('a','click',function(){alert('That tickles!')})

JQuery durchsucht das Dokument nach $('#container') und verwendet das Klickereignis und den CSS-Selektor 'a' als Parameter, um die Warnfunktion an $('#container') zu binden. . Jedes Mal, wenn ein Ereignis zu $('#container') aufsteigt, wird geprüft, ob es sich bei dem Ereignis um ein Klickereignis handelt und ob das Zielelement des Ereignisses mit dem CSS-Selektor übereinstimmt. Wenn die Ergebnisse beider Prüfungen wahr sind, wird die Funktion ausgeführt.
Es ist zu beachten, dass dieser Prozess .live() ähnelt, den Handler jedoch an ein bestimmtes Element und nicht an das Dokument bindet. Versierte JS-Benutzer könnten zu dem Schluss kommen, dass $('a').live() == $(document).delegate('a') ist, oder?
Warum .delegate() besser ist als .live()
Aus mehreren Gründen bevorzugen Benutzer normalerweise die Verwendung der Delegate-Methode von jQuery anstelle der Live-Methode. Betrachten Sie das folgende Beispiel:

Der Code lautet wie folgt:

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

oder
$(document).delegate('a', 'click', function() { blah() });
Letzteres ist tatsächlich schneller als Ersteres, weil Ersteres schon Um das Ganze zu scannen, findet das Dokument alle $('a')-Elemente und speichert sie als jQueryObjekte. Obwohl die Live-Funktion zur späteren Beurteilung nur „a“ als String-Parameter übergeben muss, „weiß“ die Funktion $() nicht, dass die verknüpfte Methode .live() sein wird.
Andererseits muss die Delegate-Methode nur das $(document)-Element finden und speichern.
Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, die Live-Bindung außerhalb von $(document).ready() aufzurufen, damit sie sofort ausgeführt wird. Auf diese Weise wird es ausgeführt, bevor das DOM gefüllt ist, sodass keine Elemente gefunden oder jQuery-Objekte erstellt werden.

Flexibilität und Kettenfähigkeit

Die Live-Funktion ist auch ziemlich verwirrend. Denken Sie darüber nach, es ist mit der Menge der $('a')-Objekte verknüpft, funktioniert aber tatsächlich mit dem $(document)-Objekt. Aus diesem Grund kann es auf beängstigende Weise versuchen, Methoden an sich selbst zu verketten. Tatsächlich sage ich, dass die Live-Methode als globale jQuery-Methode in der Form $.live('a',...) sinnvoller ist.

Unterstützt nur CSS-Selektoren

Letzter Punkt: Die Live-Methode hat einen sehr großen Nachteil, nämlich dass sie nur mit direkten CSS-Selektoren arbeiten kann unflexibel.

Um mehr über die Mängel von CSS-Selektoren zu erfahren, lesen Sie bitte den Artikel „Exploring jQuery .live() and .die()“.

Update: Vielen Dank an Pedalpete auf Hacker News und Ellsass in den Kommentaren unten, die mich daran erinnert haben, diesen nächsten Abschnitt aufzunehmen.

Warum .live() oder .delegate() anstelle von .bind() wählen?

Bind scheint schließlich klarer und direkter zu sein, nicht wahr? it? ?Nun, es gibt zwei Gründe, warum wir „Delegate“ oder „Live“ dem „Bind“ vorziehen:

1. Um Handler an DOM-Elemente anzuhängen, die möglicherweise noch nicht im DOM vorhanden sind. Da bind Handler direkt an einzelne Elemente bindet, kann es keine Handler an Elemente binden, die noch nicht auf der Seite vorhanden sind.

2. Wenn Sie $('a').bind(…) ausführen und dann über AJAX neue Links zur Seite hinzugefügt werden, ist Ihr Bind-Handler für diese neu hinzugefügten Links ungültig. Live und Delegate hingegen sind an einen anderen Vorgängerknoten gebunden und gelten daher für jedes Element, das derzeit in diesem Vorgängerelement vorhanden ist oder existieren wird.

3. Oder um Handler an ein einzelnes Element oder eine kleine Gruppe von Elementen anzuhängen, hören Sie Ereignisse auf untergeordneten Elementen ab, anstatt dieselbe Funktion nacheinander durchzugehen und an 100 Elemente im DOM anzuhängen. Das Anhängen von Handlern an ein Vorgängerelement (oder eine kleine Menge davon) bietet Leistungsvorteile, anstatt Handler direkt an alle Elemente auf der Seite anzuhängen.

Hören Sie auf, sich zu verbreiten

Die letzte Erinnerung, die ich machen möchte, hat mit der Verbreitung von Ereignissen zu tun. Normalerweise können wir die Ausführung der Handler-Funktion beenden, indem wir eine solche Ereignismethode verwenden:

Der Code lautet wie folgt:

$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
)

Wenn wir jedoch verwenden live oder Wenn es sich um die Delegate-Methode handelt, wird die Handlerfunktion nicht tatsächlich ausgeführt. Die Funktion muss warten, bis das Ereignis an das Element gesendet wird, an das der Handler tatsächlich gebunden ist. Zu diesem Zeitpunkt wurden unsere anderen Handlerfunktionen von .bind() bereits ausgeführt.

Das obige ist der detaillierte Inhalt vonAnalyse der Unterschiede zwischen .bind(), .live() und .delegate() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!