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

浏览数：38 / 时间：2015年06月09日

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( );