Ausführliche Erläuterung der Methoden und Unterschiede zwischen Bind und Live sowie Delegate und zu Bindungsereignissen in jQuery

jQuery bietet vier Ereignis-Überwachungsmethoden, nämlich binden, leben, delegieren, ein, und die entsprechenden Nicht-Listening-Funktionen sind unbind, die, undelegate, off.

Es ist bekannt, dass es 4 Listenelemente gibt:

Listenelement 1

Listenelement 2

Listenelement 3

Liste Element 4

1. bind

bind(type,[data],function(eventObject))

bind ist ein häufiger verwendeter Typ. Seine Funktion besteht darin, eine Abhörfunktion eines bestimmten Ereignistyps an das ausgewählte Element zu binden Die Parameter lauten wie folgt:

Typ: Ereignistyp, z. B. Klick, Änderung, Mouseover usw.;

Daten: Parameter , der an die Überwachung übergeben wird Funktion, erhalten über event.data. Optional;

Funktion: Abhörfunktion, die das Ereignisobjekt übergeben kann, das von jQuery gekapselt wird und sich vom nativen Ereignisobjekt unterscheidet.

Quellcode:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}

Sie können sehen, dass die on-Methode intern aufgerufen wird.

Das Merkmal von bind ist, dass es den Listener eins zu eins an das Zielelement bindet. Es ist kein Problem, es zu verwenden, wenn die Elemente auf der Seite nicht dynamisch hinzugefügt werden. Wenn jedoch ein „Listenelement 5“ dynamisch zur Liste hinzugefügt wird, erfolgt beim Klicken darauf keine Reaktion und Sie müssen es erneut binden.

2. live

live(type, [data], fn)

Die Parameter von live sind die gleichen wie bind. Schauen wir uns zuerst den Quellcode an:

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

Sie sehen, dass die Live-Methode den Hörer nicht an sich selbst (this), sondern an this.context bindet.

Live verwendet den Ereignisdelegierungsmechanismus, um die Ereignisüberwachung und -verarbeitung abzuschließen, und delegiert die Knotenverarbeitung an Dokument.

Die Vorteile der Event-Delegation liegen auf der Hand. Neu hinzugefügte Elemente müssen die Zuhörer nicht erneut binden.

3. Delegate

bindet das Listening-Ereignis an das nächstgelegene übergeordnete Element, Quellcode:

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

Jetzt sind unsere Auswahlmöglichkeiten flexibler. Sie können nicht nur Ereignisse verwenden Bei der Delegation können Sie auch den Gegenstand der Delegation auswählen. Schließlich ist es nicht gut, immer dieselbe Person zu belästigen. Sie benötigen noch eine bestimmte Strategie für die Auswahl des Delegate-Objekts. Schließlich kann es viele übergeordnete Elemente geben. Ich denke, das Prinzip sollte darin bestehen, das nächstgelegene „stabile“ Element auszuwählen. Der Grund für die Auswahl des nächstgelegenen Elements besteht darin, dass Ereignisse schneller sprudeln und so schnell wie möglich verarbeitet werden können. Das sogenannte „stabile“ bedeutet, dass das übergeordnete Element von Anfang an auf der Seite vorhanden ist, nicht dynamisch hinzugefügt wird und in Zukunft nicht verschwindet. Dadurch wird sichergestellt, dass es seine untergeordneten Elemente jederzeit überwachen kann.

4. Die on

on(type,[selector],[data],fn)

-Parameter ähneln denen von Delegate, es gibt jedoch immer noch geringfügige Unterschiede. Erstens haben Typ und Selektor ihre Positionen geändert, und zweitens ist Selektor optional geworden.

$('#myol li').on('click',getHtml);

Sie können das Ereignis sehen.aktuellZiel ist li selbst, was den gleichen Effekt wie bind hat. Die Übergabe des Selektors hat dieselbe Bedeutung wie der Delegat, bis auf die unterschiedliche Reihenfolge der Parameter ist alles andere genau gleich.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Methoden und Unterschiede zwischen Bind und Live sowie Delegate und zu Bindungsereignissen in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!