Heim > Web-Frontend > js-Tutorial > Was sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?

Was sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?

一个新手
Freigeben: 2017-10-10 10:31:00
Original
1992 Leute haben es durchsucht

1. Die bind()-Methode

bindet einen Event-Handler an das spezifische Ereignis jedes übereinstimmenden Elements. Die zugrunde liegende Logik der bind()-Methode ist die on()-Methode . Die
.bind()-Methode ist die primäre Möglichkeit, einem Dokument Verhalten zuzuordnen. Alle JavaScript-Ereignisobjekte wie Fokus, Mouseover und Größenänderung können als Typparameter übergeben werden.
Beispiel:
.bind() Die einfachste Verwendung ist:

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
Nach dem Login kopieren

Dieser Code ermöglicht es dem Element mit der ID foo, auf das Klickereignis zu reagieren. Wenn der Benutzer in das Element klickt, wird ein Warnfeld angezeigt.

2. Die on()-Methode

Bindet die Event-Handler-Funktion eines oder mehrerer Ereignisse an das ausgewählte Element. Die
on()-Methode bindet einen Event-Handler an das Element im aktuell ausgewählten jQuery-Objekt. In jQuery 1.7 bietet die Methode .on() alle Funktionen, die zum Binden von Ereignishandlern erforderlich sind.
Was sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?
Parameterbeschreibung:
Ereignisse: Ein oder mehrere Ereignistypen, getrennt durch Leerzeichen und einen optionalen Namensraum, z. B. „click“ oder „keydown.myPlugin“ .
Selektor: Eine Selektorzeichenfolge für die Nachkommen des Selektorelements, das das Filterereignis auslöst. Wenn das ausgewählte Daten: Wenn ein Ereignis ausgelöst wird, müssen event.data an die Ereignisverarbeitungsfunktion übergeben werden.
fn: Die Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Der Wert false kann auch als Abkürzung für eine Funktion verwendet werden, die false zurückgibt.

3. Die one()-Methode

bindet einen einmaligen -Ereignishandler an ein bestimmtes Ereignis (z. B. einen Klick) jedes übereinstimmenden Elements.
Auf jedem Objekt wird dieser Ereignishandler nur einmal ausgeführt . Andere Regeln sind die gleichen wie bei der Funktion bind(). Dieser Event-Handler erhält ein Event-Objekt, mit dem das Standardverhalten verhindert werden kann. Wenn Sie das Standardverhalten abbrechen und verhindern möchten, dass das Ereignis sprudelt, muss der Ereignishandler false zurückgeben.
Was sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?
Parameterbeschreibung:
Typ: Ein oder mehrere Ereignisse, die dem Element hinzugefügt wurden. Mehrere durch Leerzeichen getrennte Ereignisse. Muss ein gültiges Ereignis sein.
Daten: Datenzuordnung, die an die Ereignisverarbeitungsfunktion übergeben werden soll
fn: Funktion, die immer dann ausgeführt wird, wenn das Ereignis ausgelöst wird.

4. Live()-Methode

jQuery fügt allen übereinstimmenden Elementen eine Event-Handler-Funktion hinzu, sie ist auch dann gültig, wenn dieses Element später hinzugefügt wird.
Was sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?

Diese Methode ist im Grunde eine Variante der .bind()-Methode . Bei Verwendung von .bind() wird den vom Selektor zugeordneten Elementen ein Ereignishandler zugeordnet, später hinzugefügte Elemente jedoch nicht. Hierfür müssen Sie erneut .bind() verwenden.
Ereignisdelegierung: Die Methode
.live() kann für ein Element wirksam sein, das aufgrund der Verwendung der Ereignisdelegation nicht zum DOM hinzugefügt wurde: der an den Vorfahren gebundene Ereignishandler Das Element kann auf Ereignisse reagieren, die bei Nachkommen ausgelöst werden. Der an .live() übergebene Event-Handler wird nicht an das Element gebunden, sondern als spezieller Event-Handler behandelt und an den Wurzelknoten des DOM-Baums gebunden.
Zusätzliche Hinweise:
.live() ist zwar nützlich, kann .bind() jedoch aufgrund seiner speziellen Implementierung auf keinen Fall einfach ersetzen. Die Hauptunterschiede sind:

  1. In jQuery 1.4 unterstützt die .live()-Methode benutzerdefinierte Ereignisse und alle JavaScript-Ereignisse. In jQuery 1.4.1 gibt es sogar Unterstützung für Focus- und Blur-Ereignisse (zugeordnet zu den passenderen und sprudelnden Focusin- und Focusout-Ereignissen). Darüber hinaus wird in jQuery 1.4.1 auch Hover (zugeordnet zu „mouseenter mouseleave“) unterstützt. In jQuery 1.3.x werden jedoch nur unterstützte JavaScript-Ereignisse und benutzerdefinierte Ereignisse unterstützt: click, dblclick, keydown, keypress, keyup, Mousedown, Mousemove, Mouseout, Mouseover und Mouseup.

  2. .live() unterstützt Elemente, die durch DOM-Traversal gefunden werden, nicht vollständig. Stattdessen sollten Sie die Methode .live() immer direkt nach einem Selektor verwenden, wie im vorherigen Beispiel erwähnt.

  3. Wenn eine Ereignisbehandlungsfunktion mit .live() gebunden ist und Sie die Ausführung anderer Ereignisbehandlungsfunktionen stoppen möchten, muss diese Funktion „false“ zurückgeben. Durch den einfachen Aufruf von .stopPropagation() wird dies nicht erreicht.

Besonderer Hinweis:

Ab jQuery 1.7 wird die Methode .live() nicht mehr empfohlen. Bitte verwenden Sie .on(), um die Ereignisbehandlung hinzuzufügen.

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen den Bindungsereignisfunktionen bind(), one(), on() und live() in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage