jQuery.off()函数用法笔记

jQuery.off()函数用法笔记

1、off()函数的用法：off（events,selector,handler），

接受三个参数：

a.events：要解绑的事件类型，
selector:on()函数绑定事件的对象，并且值得和绑定时候传入的选择器值一样
handler:事件处理程序

1.1、off（events,selector,handler）：

具体指定了需要解绑事件的对象，事件的类型，和解绑的事件处理程序，限制的条件较多，能

够最准确地解绑事件；

1.2、.off( events , selector ):

指定了具体指定了需要解绑事件的对象，事件的类型，会使得所有属于该事件类型的事件处理程序被解绑；

1.3、off(events):会解绑调用对象的指定事件类型，

1.4、off(): 会解绑调用对象的所有绑定事件比如以下的mouseenter，click

html代码：

<ul style="width: 400px;height: 400px;border: solid 1px #000">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
</ul> 

代码片一：

function handler() {
  console.log("click:handler");
}
function handler1() {
  console.log("mouseenter:handler1");
}
$("ul").on("mouseenter",handler1);
$("ul").on("click","li",handler);

/*1.off（events,selector,handler） */
/*
当selector指定解绑id为#one时候是无法解绑该对象上的事件的，点击的时候还能触发事件，而将
selector修改为绑定时候的li则能够解绑,
*/
$("ul").off("click","#one",handler); 
$("ul").off("click","li",handler);

/*2.off( events , selector  )*/
/*
会解绑ul上面事件类型为click而事件处理程序为handler的事件,ul上面的click--handler1事件没
有被解绑
*/
$("ul").on("click",handler1);
$("ul").off("click",handler);

/*3.off( events )*/
/*
会解绑ul上面事件类型为click的事件，这时候，li的click事件也失灵了，因为li的click事件是
由事件要素绑定在ul上面的
*/
$("ul").off("click");

/*4.off()*/
/*
会解绑ul上面所有的事件，以及后代有事件要素绑定在ul上的事件比如
$("li").on("click",handler);注释时候，点击li是没反应的，而不能解绑事件三要素都绑定早后
代上面的事件比如$("li").on("click",handler)的click事件是无法通过ul解绑的
*/
$("li").on("click",handler);
$("ul").off();

总结：我们对某个对象解绑事件的时候，
a).会解绑该对象自己的事件（事件三要素都是绑定在该对象上面的事件）；
b).会解绑事件三要素某些要素绑定在该对象上面的事件，比如我们指定了ul为li的click事件
代理，这时候事件源绑定在li上面，事件类型及事件处理程序是在ul上面，当我们通过ul或者
li,解绑click事件的时候，会相应地解绑ul或者li上面的事件要素