Einführung in vier Möglichkeiten zum Binden von Ereignissen mit jQuery

Dieses Kapitel stellt Ihnen die vier Möglichkeiten zum Binden von Ereignissen in jQuery vor. Es hat einen gewissen Referenzwert. Ich hoffe, es wird Ihnen hilfreich sein.

jQuery bietet vier Methoden zur Ereignisüberwachung: binden, live, delegieren und einschalten. Die entsprechenden Funktionen zum Aufheben der Zuhörerschaft sind „unbind“, „die“, „undelegate“ und „off“. Lassen Sie uns in diesem Artikel nacheinander eine detaillierte Einführung geben. Interessierte Freunde sollten einen Blick darauf werfen.

jQuery bietet verschiedene Möglichkeiten, Ereignisse zu binden. Verstehen Sie die Gemeinsamkeiten und Unterschiede zwischen ihnen hilft uns, beim Schreiben von Code die richtigen Entscheidungen zu treffen, um eleganten und leicht 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 einschalten. Die entsprechenden Funktionen zum Aufheben der Zuhörerschaft sind „unbind“, „die“, „undelegate“ und „off“. Bevor Sie anfangen, sie sich anzusehen

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

bind wird häufiger verwendet Ein Typ 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, Ändern, Mouseover usw .;

data: Die an die Listening-Funktion übergebenen Parameter werden über event.data abgerufen. Optional;

Funktion: Abhörfunktion, die das Ereignisobjekt übergeben kann, das von jQuery gekapselt wird. Bei der Verwendung muss darauf geachtet werden zum

bind Quellcode:

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. Es gibt kein Problem bei der Verwendung Elemente auf der Seite werden nicht dynamisch hinzugefügt. 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 bind, aber es ist nur eine Abkürzung.

2: live(type, [data], fn)

Die Parameter von live sind die gleichen wie bind. Was ist daran falsch? Zuerst den Quellcode. :

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 Listener 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 wird zeigen:

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

3: Live hat solche Mängel, also dachten wir, da der alte Mann eine so schwere Last trägt, können wir den Hörer nicht an das binden Wäre es andererseits nicht besser, es an das nächstgelegene übergeordnete Element zu binden? 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. Was die Übergabe des Selektors angeht, hat er 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 internen Aufruf vervollständigt werden können und die Effizienz verbessert werden kann. Außerdem können Sie on verwenden, um die anderen drei Schreibmethoden zu ersetzen. Was den Austausch 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.

Die oben genannten vier vom Herausgeber eingeführten Möglichkeiten zum Binden von Ereignissen in jQuery werden hoffentlich für alle hilfreich sein.