jquery之on()綁定事件和off()解除綁定事件

off()函數用於移除元素上綁定的一個或多個事件的事件處理函數。

off()函數主要用於解除由on()函數綁定的事件處理函數。

該函數屬於jQuery物件(實例)。

語法

jQuery 1.7 新增此函數。其主要有以下兩種形式的用法：

用法一：

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

用法二：

jQueryObject.off( eventsMap [, selector ] )

參數

參數	描述
#events	可選/ String類型一個或多個空格分隔的事件類型和可選的命名空間，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object類型一個Object物件，其每個屬性對應事件類型和可選的命名空間(參數events)，屬性值對應綁定的事件處理函數(參數handler)。
selector	可選/String類型一個jQuery選擇器，用於指定哪些後代元素可以觸發綁定的事件。如果該參數為null或被省略，則表示當前元素本身綁定事件(實際觸發者也可能是後代元素，只要事件流能到達目前元素即可)。
handler	可選/Function類型指定的事件處理函數。

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类型指定的事件处理函数。

關於參數events中可選的命名空間，請參考最下面的範例程式碼。

關於參數selector，你可以簡單地理解為：如果該參數等於null或被省略，則為目前符合元素綁定事件；否則就是為目前符合元素的後代元素中符合selector選擇器的元素綁定事件。

參數handler中的this指向目前符合元素的後代元素中觸發該事件的DOM元素。如果參數selector等於null或被省略，則this指向目前符合元素(也就是該元素)。

on()也會為handler傳入一個參數：表示目前事件的Event物件。

參數handler的傳回值與DOM原生事件的處理函數回傳值作用一致。例如"submit"(表單提交)事件的事件處理函數傳回false，可以封鎖表單的提交。

如果事件處理函數handler只為傳回false值，可以直接將handler設為false。

傳回值

on()函數的傳回值為jQuery類型，傳回目前jQuery物件本身。

重要說明：

on()函數並不是為目前jQuery物件匹配的元素綁定事件處理函數，而是為它們的後代元素中符合選擇器selector參數的元素綁定事件處理函數。 on()函數並不是直接為這些後代元素挨個綁定事件，而是委託給當前jQuery物件的匹配元素來處理。由於DOM 2級的事件流機制，當後代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會判斷是哪個後代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行綁定的事件處理函數。

 

#

以上是jquery之on()綁定事件和off()解除綁定事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！