Detaillierte Erläuterung der Anwendungsbeispiele für die jQuery.on()-Funktion-js-Tutorial-php.cn

Die Funktion

on() wird verwendet, um die Funktion Ereignisverarbeitung an ein oder mehrere Ereignisse des angegebenen Elements zu binden.

Darüber hinaus können Sie auch einige zusätzliche erforderliche Daten an die Event-Handler-Funktion übergeben.

Ab jQuery 1.7 stellt die Funktion on() alle zum Binden von Event-Handlern erforderlichen Funktionen bereit und wird verwendet, um die vorherigen Event-Funktionen wie bind(), Delegate(), Live() einheitlich zu ersetzen. usw.

on() unterstützt Bindungsereignisse direkt am Zielelement und unterstützt auch die delegierte Bindung an die Vorgängerelemente des Zielelements. Im Ereignisdelegierungsbindungsmodus ist die gebundene Ereignisbehandlungsfunktion für das Element wirksam, auch wenn es sich nach Ausführung der Funktion on () um ein neu hinzugefügtes Element handelt, solange es die Bedingungen erfüllt.

Darüber hinaus kann diese Funktion mehrere Event-Handler an dasselbe Element und denselben Event-Typ binden. Wenn ein Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Um ein über on() gebundenes Ereignis zu entfernen, verwenden Sie die Funktion off(). Wenn Sie ein Ereignis anhängen, es nur einmal ausführen und sich dann selbst löschen möchten, verwenden Sie die Funktion one().

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.7 hinzugefügt. Es gibt hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung eins:

jQueryObject.on( events [, selector ] [, data ], handler )

Verwendung zwei:

jQueryObject.on( eventsMap [, selector ] [, data ] )

Parameter

Parameterbeschreibung

events Zeichenfolgentyp eins oder mehrere mit Leerzeichen getrennt Ereignistypen und optionale Namespaces, wie „click“, „focus click“, „keydown.myPlugin“.

eventsMap-Objekttyp ist ein Objektobjekt, jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameterereignisse) und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameter). Behandler).

selector Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können. Wenn dieser Parameter null ist oder weggelassen wird, bedeutet dies, dass das aktuelle Element selbst an das Ereignis gebunden ist (der eigentliche Auslöser kann auch ein untergeordnetes Element sein, solange der Ereignisstrom das aktuelle Element erreichen kann).

data Optional/Jede Art von Daten, die über event.data an die Ereignisverarbeitungsfunktion übergeben werden müssen, wenn ein Ereignis ausgelöst wird.

Durch den Handler-Funktionstyp angegebene Ereignisverarbeitungsfunktion.

Informationen zum optionalen Namespace in den Parameterereignissen finden Sie im folgenden Beispielcode.

Was den Parameterselektor betrifft, können Sie ihn einfach so verstehen: Wenn der Parameter gleich Null ist oder weggelassen wird, ist das Ereignis an das aktuelle übereinstimmende Element gebunden, andernfalls ist es das untergeordnete Element des aktuellen übereinstimmenden Elements das dem Selektor-Selektor-Bindungsereignis entspricht.

Dies im Parameterhandler zeigt auf das DOM-Element, das das Ereignis unter den Nachkommenelementen des aktuell übereinstimmenden Elements auslöst. Wenn der Selektorparameter null ist oder weggelassen wird, zeigt dies auf das aktuell übereinstimmende Element (d. h. das Element).

on() übergibt außerdem einen Parameter an den Handler: das Event-Objekt, das das aktuelle Ereignis darstellt.

Der Rückgabewert des Parameterhandlers hat die gleiche Wirkung wie der Rückgabewert der nativen DOM-Ereignisverarbeitungsfunktion. Beispielsweise gibt der Ereignishandler des Ereignisses „submit“ (Formularübermittlung) „false“ zurück, um zu verhindern, dass das Formular übermittelt wird.

Wenn der Handler der Ereignisverarbeitungsfunktion nur einen falschen Wert zurückgibt, können Sie den Handler direkt auf false setzen.

Rückgabewert

on()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Wichtiger Hinweis:

Wenn der Selector-Parameter übergeben wird, bindet die Funktion on() Ereignishandler nicht an Elemente, die mit dem aktuellen jQuery-Objekt übereinstimmen, sondern an ihre untergeordneten Elemente, die mit der Elementbindung übereinstimmen Ereignishandler des Selektorparameters des Selektors. Die Funktion on() bindet Ereignisse nicht direkt einzeln an diese untergeordneten Elemente, sondern delegiert die Verarbeitung an die übereinstimmenden Elemente des aktuellen jQuery-Objekts. Aufgrund des DOM-Level-2-Ereignisflussmechanismus wird das Ereignis an alle seine Vorfahrenelemente in der Ereignisblase übergeben, wenn der Nachkommenelementselektor ein Ereignis auslöst. Wenn der Ereignisfluss an das aktuell übereinstimmende Element übergeben wird, bestimmt jQuery, welches Wenn ein Ereignis ausgelöst wird und das Element mit dem Selektor übereinstimmt, erfasst jQuery das Ereignis und führt den gebundenen Ereignishandler aus.

Um es einfach auszudrücken: Wenn wir Click-Event-Handler an alle

-Tags binden möchten, können wir Click-Event-Handler direkt an jedes P-Tag separat binden. Zum Beispiel:

// Binden Sie den Click-Event-Handler-Funktionshandler separat an alle P-Elemente

$("p").on("click", handler);

Wir können den Ereignisdelegierungsmechanismus auch an jedes gemeinsame Vorgängerelement dieser P-Tags binden und den Ereignis-Bubbling-Mechanismus des DOM verwenden, um die Delegationsverarbeitung zu vereinheitlichen. Wenn wir das Klickereignis eines Elements auslösen, benachrichtigt JS das Element und sein „übergeordnetes“ Element, „Großvater“-Element ... bis das oberste Dokumentobjekt ausgeführt wird Sequenz.

// Binden Sie den Click-Event-Handler-Funktionshandler an das Body-Element. Wenn das Click-Ereignis durch sein untergeordnetes P-Element ausgelöst wird, wird der Handler

ausgeführt.

$(document.body).on("click", "p", handler);

在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。

示例&说明

以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：

// 这里的选择器selector用于指定可以触发事件的元素

// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)

$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)

$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+

$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+

$("ancestor").on( "click", "selector" [, data ], handler );

请参考下面这段初始HTML代码：

CodePlayer

专注于编程开发技术分享

http://www.365mini.com

Google

Wir binden Klickereignisse an alle

-Elemente in

// Klick-Ereignishandler an alle p-Elemente im div binden

// Nur n2 und n3 können dieses Ereignis auslösen

$("div").on(" click", " p", function(){

// Dies zeigt hier auf das p-Element (Element), das das Klickereignis ausgelöst hat

alarm( $(this).text() );

});

Führen Sie den Code aus (bitte kopieren Sie andere Codes zur Ausführung auf die Demoseite)

Wenn Sie alle

-Elemente binden möchten, können Sie schreiben als folgt jQuery-Code:

//Klick-Ereignishandler für alle p-Elemente binden (Hinweis: Der Selektorparameter wird hier weggelassen)

//n2, n3 und n5 können dieses Ereignis auslösen

$("p").on("click", function(event){

// Dies zeigt hier auf das p-Element (Element), das das Klickereignis ausgelöst hat

alarm ( $(this).text() );

});

Darüber hinaus können wir auch mehrere Ereignisse gleichzeitig binden und einige zusätzliche Daten an die Ereignisbehandlung übergeben Funktion. Wir können es über den von jQuery übergebenen Parameter event (Ereignisereignisobjekt) für die Ereignisverarbeitungsfunktion verarbeiten:

var data = { id: 5, name: „Zhang San“ };

/ / Binden Sie zwei Ereignisse mit „Mouseenter Mouseleave“ an n5 und übergeben Sie zusätzliche Datendaten

// Zusätzliche Daten können von jedem Typ sein

$("body").on( "mouseenter mouseleave", "#n5", data, function(event){

var $me = $(this);

var options = event.data; // Das ist was wird in Zusatzdaten übergeben

if( event.type == "mouseenter"){

$me.html( "Hallo," + options.name + "!"); >

}else if(event.type == "mouseleave" ){

$me.html( "Goodbye!"); 🎜>

Außerdem, auch wenn das qualifizierende Element neu ist hinzugefügt, nachdem die Funktion on() ausgeführt wurde, ist das Bindungsereignis weiterhin dafür gültig. Am Beispiel des anfänglichen HTML-Codes können wir den folgenden jQuery-Code schreiben:

// Klickereignishandler an alle p-Elemente im div binden

// Nur n2 und n3 können sein Das Ereignis wurde ausgelöst

$("div").on("click", "p", function(event){

alarm( $(this).text() );

});

// Das später hinzugefügte n6 kann auch das obige Klickereignis auslösen, da es auch das p-Element im div ist

$("#n1" ).append( '

Das oben gebundene Klickereignis wird auch auf dieses Element wirksam!

');

Der Parameter Ereignisse unterstützt auch zusätzliche Namespaces für Ereignisse Typen. Beim Binden mehrerer Ereignishandler desselben Typs an dasselbe Element. Mithilfe von Namespaces können Sie den Umfang des Auslösens oder Entfernens beim Auslösen von Ereignissen und beim

Entfernen von Ereignissen

einschränken.

on()

Die Parameter der FunktioneventsMap ist ein Objekt, das mehrere „Funktionen zur Ereignistypbehandlung“ in Form von „Eigenschaftswert“ angeben kann. Der entsprechende Beispielcode lautet wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsbeispiele für die jQuery.on()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!