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