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

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 die am häufigsten verwendete Methode und ihre Funktion besteht darin, das Element Bind auszuwählen Die Abhörfunktion eines bestimmten Ereignistyps ist wie folgt:

Typ: Ereignistyp, z. B. Klicken, Ändern, Mouseover usw.; Übergeben Sie es an die Abhörfunktion und erhalten Sie über das Ereignis .data. 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 Hörer an das Zielelement bindet, eins um eins, und die Elemente auf der Seite werden nicht verwendet. Beim dynamischen Hinzufügen ist die Verwendung kein Problem. 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 (dies) bindet, sondern an diesen.Kontext. Was ist dieser Kontext? Tatsächlich ist es der begrenzte Bereich des Elements. Es wird klar, nachdem Sie den folgenden Code gelesen haben:

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

Normalerweise Wir alle Der Selektor wird nicht wie die dritte Methode verwendet, daher wird davon ausgegangen, dass der 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 es zeigen:

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

Drei: Das Leben hat solche Mängel, also dachten wir, da der alte Mann eine so schwere Last trägt, können wir das? not Der Listener ist an das Dokument gebunden. Wäre es 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. Werfen wir zunächst einen Blick auf das Beispiel:

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

Nachdem Sie so viel gesehen haben, sind Sie gespannt darauf, das wahre Gesicht davon zu sehen? Hier kommt es :

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

Die Parameter ähneln denen des Delegaten, es gibt jedoch immer noch geringfügige Unterschiede. Erstens haben Typ und Selektor ihre Positionen geändert, und zweitens hat sich der Selektor geändert werden optional. Der Grund für den Positionswechsel ist schwer zu ermitteln, 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 und bind Der Effekt ist der gleiche. 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 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.