Bootstrap

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上面的事件要素

;