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

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

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

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

語法

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

用法一：

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

用法二：

jQueryObject.off( eventsMap [, selector ] )

參數

off()函數將會移除目前符合元素上為後代元素selector綁定的events事件的事件處理函數handler。

如果省略參數selector，則移除為任何元素綁定的事件處理函數。

參數selector必須與透過on()函數新增綁定時傳入的選擇器一致。

如果省略參數handler，則移除指定元素指定事件類型上綁定的所有事件處理函數。

如果省略了所有參數，則表示移除目前元素上為任何元素綁定的任何事件類型的任何事件處理函數。

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

實際上，off()函數的參數全是篩選條件，只有符合所有參數條件的事件處理函數才會被移除。參數越多，限定條件越多，移除的範圍就越小。

off()方法的程式碼範例:

容易忽略的點：off所解除元素的綁定事件，其中選擇器必須和on綁定事件時所使用的選擇器一致。

html程式碼

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

   

頁載入時執行的jquery程式碼

function btnClick1(){
  alert( this.value + "-1" );
}
 
function btnClick2(){
  alert( this.value + "-2" );
}
 
var $body = $("body");
 
// 给按钮1绑定点击
$body.on("click", "#btn1", btnClick1 );
 
// 给按钮2绑定点击
$body.on("click", "#btn2", btnClick2 );
 
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", function(event){
  if( event.type == "click" ){
    $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
    alert("点击事件");
    alert("ddd");
  }else if( event.type == "mouseover" ){
    $(this).css("color", "red");
  }else{
    $(this).css("color", "blue");
     
  }
});
 
 
// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮，btnClick1照样执行
$body.off("click", ":button", btnClick2);
 
 
// 点击按钮1，不会执行任何事件处理函数
// $body.off("click", "#btn1");
 
 
// 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
 
 
// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接，都不会触发执行任何事件处理函数
// $("body").off("click");
 
 
// 移除body元素为所有元素的任何事件绑定的所有处理函数
// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数
// $("body").off( );

   

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 [, 用法二：

jQueryObject.on( eventsMap [, 紙片] , data ] )

參數

關於參數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就會捕獲該事件，從而執行綁定的事件處理函數。

🎜🎜