Vier Möglichkeiten, Ereignisse mit jQuery zu binden

jQuery bietet verschiedene Möglichkeiten zum Binden von Ereignissen. Das Verständnis der Ähnlichkeiten und Unterschiede zwischen ihnen hilft uns, beim Schreiben von Code die richtige Wahl zu treffen, um eleganten und einfach zu wartenden Code zu schreiben. Werfen wir einen Blick auf die Möglichkeiten zum Binden von Ereignissen in jQuery.

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“. Bevor Sie anfangen, sie sich anzusehen

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

bind ist eine häufiger verwendete Methode und ihre Funktion besteht darin, Elemente auszuwählen. Binden Sie die Die Bedeutung der Parameter ist wie folgt:

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

Daten: die übergebenen Parameter In die Abhörfunktion werden über das Ereignis .data abgerufen. Optional;

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

Der Quellcode von bind:

bind: function( types, data, fn ) {
 
  return this.on( types, null, data, fn );
 
  }
 
$('#myol li').bind('click',getHtml);

Das Merkmal von bind ist, dass es den Listener eins zu eins an das Zielelement bindet und es verwendet 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 verfügt auch über eine Kurzform der Ereignisbindung, z. B. a.click(function(){});, a.change(function(){}); usw. Ihre Funktionen sind die gleichen wie binden, nur Es ist nur eine Abkürzung.

Zwei: 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 können sehen, dass die Live-Methode den Hörer nicht an sich selbst (this), sondern an this.context bindet. Was ist dieser Kontext? Tatsächlich wird es nach dem Lesen des folgenden Codes klar:

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

Normalerweise verwenden wir keine Selektoren wie die dritte Methode. Es wird davon ausgegangen, dass dieser Kontext normalerweise das Dokument ist, dh 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 zeigt:

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

Drei: Live hat solche Mängel, also dachten wir, können wir den Hörer nicht an das Dokument binden, da es eine so schwere Last trägt? Ist 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 );
 
}

ruft erneut on auf und übergibt 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 Erscheinungsbild davon zu sehen:

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

Parameter und Delegaten Es ist fast dasselbe, aber es gibt immer noch subtile Unterschiede. Erstens haben Typ und Selektor ihre Positionen geändert, und zweitens ist Selektor optional geworden. Der Grund für den Positionswechsel lässt sich nur schwer nachvollziehen, er sollte aber darin bestehen, ihn optisch komfortabler zu gestalten.

Sehen 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 sehen wir die wahre Rolle von on. Wie sollten wir uns bei so vielen Ereignisbindungsmethoden entscheiden?

Tatsächlich besteht kein Grund zur Sorge über dieses Problem. weil du es schon hast Du kennst den Unterschied zwischen ihnen, oder? Verwenden Sie es einfach entsprechend der tatsächlichen Situation. 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.