自从jquery1.7以来，on事件添加到这个版本，使得事件的绑定变的十分简单，用过jquery的人相信对off，on方法爱不释手。下面是相关的on,off的使用语法:

on() 使用场景

最简单的写法

1
2
3
$("ul li").on("click",function(){  
  alert("点击事件!");  
})

多个元素绑定相同事件

1
2
3
$("ul li,div").on("click",function(){  
  alert("点击事件!");  
})

元素绑定多个事件

1
2
3
4
5
6
7
8
$(".demonstrate").on({  
  mouseover:function(){  
    $(this).addClass("over");  
  },  
  mouseout:function(){  
    $(this).removeClass("over");  
  }  
},"ul li")

实现事件委托

父元素ul li 给目标元素.demostrate添加事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以，给父元素添加委托事件，不用考虑子元素的数量什么的。

1
2
3
4
5
6
7
8
9
10
11
12
$("ul li").on({
  click:function(){
    console.log('click','1111');
  },
  mouseover: function () {
    console.log('mouseover','1111');
    $(this).addClass("over");
  },
  mouseout: function () {
    $(this).removeClass("over");
  }
},".demostrate");

具体用法

用法一

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

关于参数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就会捕获该事件，从而执行绑定的事件处理函数。

off() 解绑事件

最简单的写法

1
$("ul li").off("click")

多个元素解绑相同事件

1
$("ul li,div").off("click")

元素解绑多个事件

1
$(".demonstrate").off("mouseover mouseout","ul li")

实现事件委托的解绑

父元素ul li 给目标元素.demostrate移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以，给父元素移除委托事件，不用考虑子元素的数量什么的。

1
$("ul li").off("click mouseover mouseout",".demostrate");

具体用法

用法一

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()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数才会被移除。参数越多，限定条件就越多，被移除的范围就越小。

相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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( );