jquerys on()-Bindungsereignis und off()-Entbindungsereignis

Die Funktion

off() wird verwendet, um ein oder mehrere an ein Element gebundene Ereignisse Ereignisbehandlungsfunktion zu entfernen. Die Funktion

wird hauptsächlich zum Entsperren der durch die Funktion on() gebundenen Ereignisverarbeitungsfunktion verwendet. off()

Diese Funktion gehört zum

-Objekt (Instanz). jQuery

Syntax

jQuery

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

Verwendung eins :

jQueryObject.off( [ events [, selector ] [, handler ] ] )

Verwendung zwei :

jQueryObject.off( eventsMap [, selector ] )

Parameter

Parameter

Beschreibung

Ereignisse

Optional/String Geben Sie einen oder mehrere Ereignistypen ein, getrennt durch Leerzeichen und optional Namespace

参数	描述
events	可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
handler	可选/Function类型指定的事件处理函数。

, wie „click“, „focus click“, „keydown.myPlugin“.

eventsMap

Objekttyp eins Objektobjekt , jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameter events), und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion ( Parameter handler).

Selektor

Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche Nachkommenelemente 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). .

handler

Optionale/Ereignisbehandlung, angegeben durch den Funktionstyp Funktion

off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。

如果省略参数selector，则移除为任何元素绑定的事件处理函数。

参数selector必须与通过on()函数添加绑定时传入的选择器一致。

如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。

如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

返回值

off()函数的返回值为jQuery类型，返回当前jQuery对象本身。

实际上，off()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数才会被移除。参数越多，限定条件就越多，被移除的范围就越小。

off()方法的代码示例:

容易忽略的点：off所解除元素的绑定事件，其中选择器必须和on绑定事件时所用的选择器一致。

html代码

1 <input id="btn1" type="button" value="点击1" />
2 <input id="btn2" type="button" value="点击2" />
3 <a id="a1" href="#">CodePlayer</a>

View Code

页面加载时执行的jquery代码

 1 function btnClick1(){ 
 2     alert( this.value + "-1" ); 
 3 } 
 4  
 5 function btnClick2(){ 
 6     alert( this.value + "-2" ); 
 7 } 
 8  
 9 var $body = $("body");
 10 
 11 // 给按钮1绑定点击
 12 $body.on("click", "#btn1", btnClick1 );
 13 
 14 // 给按钮2绑定点击15 $body.on("click", "#btn2", btnClick2 );
 16 
 17 //为所有a元素绑定click、mouseover、mouseleave事件
 18 $body.on("click mouseover mouseleave", "a", function(event){
 19     if( event.type == "click" ){
 20         $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
 21         alert("点击事件");
 22         alert("ddd");
 23     }else if( event.type == "mouseover" ){
 24         $(this).css("color", "red");
 25     }else{
 26         $(this).css("color", "blue");
 27         
 28     }
 29 });
 30 
 31 
 32 // 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
 33 // 点击按钮，btnClick1照样执行
 34 $body.off("click", ":button", btnClick2);
 35 
 36 
 37 // 点击按钮1，不会执行任何事件处理函数
 38 // $body.off("click", "#btn1");
 39 
 40 
 41 // 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
 42 
 43 
 44 // 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
 45 // 点击按钮或链接，都不会触发执行任何事件处理函数
 46 // $("body").off("click");
 47 
 48 
 49 // 移除body元素为所有元素的任何事件绑定的所有处理函数
 50 // 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数51 // $("body").off( );

View Code

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法：

用法一：

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

用法二：

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

参数

参数	描述
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型指定的事件处理函数。

Informationen zum optionalen Namespace im Parameter events finden Sie im folgenden Beispielcode.

Was den Parameter selector betrifft, können Sie ihn einfach so verstehen: Wenn der Parameter gleich null ist oder weggelassen wird, ist das Ereignis an das aktuell passende Element von gebunden; andernfalls ist es so das aktuell passende Element von Bindungsereignisse für Elemente, die mit dem selector-Selektor in den Nachkommenelementen des Elements übereinstimmen.

Der handler im Parameter this zeigt auf das DOM-Element, das das Ereignis unter den Nachkommenelementen des aktuell übereinstimmenden Elements auslöst. Wenn der Parameter selector gleich null ist oder weggelassen wird, zeigt this auf das aktuell passende Element (d. h. dieses Element).

on() übergibt auch einen Parameter für handler: das Event-Objekt, das das aktuelle Ereignis darstellt. Der Rückgabewert des

-Parameters handler hat die gleiche Wirkung wie der Rückgabewert der nativen DOM-Ereignishandlerfunktion. Beispielsweise gibt die Ereignishandlerfunktion des Ereignisses „submit“ (Formularübermittlung) false zurück, was die Übermittlung des Formulars verhindern kann.

Wenn der Event-Handler handler nur den Wert false zurückgibt, können Sie handler direkt auf false setzen.

Rückgabewert

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

Wichtiger Hinweis: Die Funktion

on() bindet keinen Ereignishandler an das Element, das mit dem aktuellen jQuery-Objekt übereinstimmt. Dies ist der Fall um Ereignishandler an Elemente in ihren Nachkommenelementen zu binden, die mit den Selektor--Parametern übereinstimmen. Die Funktion 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 das untergeordnete Element selector an das aktuelle übereinstimmende Element übergeben wird Bestimmen Sie, um welches Element es sich handelt. Wenn das Element mit dem Selektor on() übereinstimmt, erfasst jQuery das Ereignis und führt die gebundene Ereignisbehandlungsfunktion selector aus. selector

Das obige ist der detaillierte Inhalt vonjquerys on()-Bindungsereignis und off()-Entbindungsereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!