Wie viele Möglichkeiten gibt es, Ereignisse in JQuery zu binden?

Es gibt 4 Möglichkeiten, Ereignisse in jquery zu binden, nämlich: die Methoden bind(), live(), delegate() und on(). Die Methode bind() kann Ereignisse nur an vorhandene Elemente binden, und live() an () und Delegate() unterstützen alle die Ereignisbindung für neu hinzugefügte Elemente in der Zukunft.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

jQuery bietet vier Methoden zur Ereignisüberwachung: binden, live, delegieren und ein. Die entsprechenden Funktionen zum Entsperren der Überwachung sind unbind, die, undelegate und off.

Der Unterschied zwischen diesen Methoden:

1. Die Funktion bind() kann nur Ereignisse für vorhandene Elemente festlegen; live(), on() und delegate() unterstützen jedoch alle neue Ereigniseinstellungen für Elemente;

2. Die Funktion bind() war vor der Veröffentlichung von Version 1.7 relativ beliebt, und die alternative Funktion ist on(), die ebenfalls neu hinzugefügt wurde Version 1.7. Funktion kann auch verwendet werden, um die Funktion live() zu ersetzen. [Verwandte Empfehlung: „jQuery Video Tutorial“]

3 Die Funktion „delegate()“ ist ähnlich, aber die Funktion „live()“ ist in Bezug auf Ausführungsgeschwindigkeit, Flexibilität und CSS-Selektorunterstützung schlechter. 4. bind() unterstützt alle Versionen von Jquery. live() unterstützt jquery1.9. ;delegate() Unterstützt jquery1.4.2+; on() unterstützt jquery1.7+;

bind Es wird häufiger verwendet. Seine Funktion besteht darin, eine Abhörfunktion eines bestimmten Ereignistyps an das ausgewählte Element zu binden. Die Bedeutung der Parameter ist wie folgt:

Typ: Ereignistyp, z. B. Klicken. Änderung, Mouseover usw.; Daten: Die an die Listening-Funktion übergebenen Parameter werden über event.data abgerufen. Optional;

Funktion: Sie können das Ereignisobjekt übergeben, das von jQuery gekapselt wird. Bei der Verwendung müssen Sie darauf achten Bindungscode:

  bind: function( types, data, fn ) {

  return this.on( types, null, data, fn );

  }

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

Bindungseigenschaften Dies bedeutet, dass der Listener eins zu eins an das Zielelement gebunden wird. Es gibt kein Problem bei der Verwendung, 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. Um dieses Problem zu vermeiden, können wir Live verwenden.

jQuery hat auch eine Abkürzung für Ereignisbindung, wie z. B. a.click(function(){});, a.change(function(){}); usw. Ihre Funktionen sind die gleichen wie bind, sie sind einfach Abkürzungen.

2. 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;

}

Das können Sie sehen Die Live-Methode ist nicht an sich selbst (this) gebunden, sondern an this.context. Was ist dieser Kontext? Tatsächlich ist es der begrenzte Bereich des Elements. Nach dem Lesen des folgenden Codes wird klar:

$('#myol li').context; //document

$('#myol li','#myol').context; //document

$('#myol li',$('#myol')[0]); //ol

Normalerweise verwenden wir keine Selektoren wie die dritte Methode, daher berücksichtigen wir diesen Kontext Das Dokument, das heißt, die Live-Methode bindet den Listener an das Dokument. Haben Sie sich an den Ereignisdelegierungsmechanismus erinnert, ohne den Listener direkt an das Element zu binden? Wenn nicht, können Sie hier klicken, um ihn abzurufen. Live verwendet den Ereignisdelegierungsmechanismus, um die Ereignisüberwachung und -verarbeitung abzuschließen, und delegiert die Knotenverarbeitung an das Dokument. In der Listening-Funktion können wir event.currentTarget verwenden, um den Knoten abzurufen, der das Ereignis aktuell erfasst. Das folgende Beispiel wird zeigen:

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

3. Delegate und on

live haben solche Mängel, also dachten wir, können wir den Hörer nicht an das Dokument binden? Wäre es nicht besser, das nächstgelegene übergeordnete Element zu verwenden? Der normalen Logik folgend, wurde der Delegierte geboren.

Der Parameter verfügt über einen zusätzlichen Selektor, mit dem das Zielelement angegeben wird, das das Ereignis auslöst. Der Listener wird an das Element gebunden, das diese Methode aufruft. Schauen Sie sich den Quellcode an:

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

rief erneut on auf und übergab den Selektor an on. Es scheint, dass dies wirklich wichtig ist. Ignoriere es einfach vorerst. Schauen wir uns zuerst das Beispiel an:

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

Nachdem Sie so viel gelesen haben, können Sie es kaum erwarten, das wahre Gesicht davon zu sehen:

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

Die Parameter ähneln denen von Delegate, aber es gibt immer noch subtile Unterschiede . Zuerst Typ und Selektor Die Position wurde geändert und der Selektor ist optional geworden. Der Grund für den Positionswechsel lässt sich nur schwer nachvollziehen, er sollte aber darin bestehen, ihn optisch komfortabler zu gestalten. Schauen wir uns ein Beispiel an, ohne den Selektor zu übergeben:

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

Sie können sehen, dass event.currentTarget li selbst ist, 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.

Endlich erkennen wir die wahre Rolle von on. Wie sollten wir uns bei so vielen Event-Bindungsmethoden entscheiden?

Tatsächlich besteht über dieses Problem überhaupt kein Grund zur Sorge, da Sie den Unterschied zwischen ihnen bereits kennen, oder? Eine offizielle Empfehlung lautet jedoch, so viel wie möglich zu verwenden, da andere Methoden durch einen internen Aufruf vervollständigt werden können. Die direkte Verwendung von on kann die Effizienz verbessern und Sie können on verwenden, um die anderen drei Schreibmethoden zu ersetzen. Was den Ersatz angeht, denke ich, dass es nicht nötig ist, sie so direkt aufzuschreiben, nachdem man ihre Unterschiede wirklich verstanden hat, wird es natürlich nicht schwierig sein.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWie viele Möglichkeiten gibt es, Ereignisse in JQuery zu binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!