jQuery.off() 函数详解
来源:互联网 发布:网络建设需求 编辑:程序博客网 时间:2024/04/28 22:38
off()
函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()
函数主要用于解除由on()函数绑定的事件处理函数。
该函数属于jQuery
对象(实例)。
语法
jQuery 1.7 新增该函数。其主要有以下两种形式的用法:
用法一:
jQueryObject.off( [ events [, selector ] [, handler ] ] )
用法二:
jQueryObject.off( eventsMap [, selector ] )
参数
events
),属性值对应绑定的事件处理函数(参数handler
)。selector可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null
或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。handler可选/Function类型指定的事件处理函数。off()
函数将会移除当前匹配元素上为后代元素selector
绑定的events
事件的事件处理函数handler
。
如果省略参数selector
,则移除为任何元素绑定的事件处理函数。
参数selector
必须与通过on()函数添加绑定时传入的选择器一致。
如果省略参数handler
,则移除指定元素指定事件类型上绑定的所有事件处理函数。
如果省略了所有参数,则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。
返回值
off()
函数的返回值为jQuery类型,返回当前jQuery对象本身。
实际上,off()
函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数才会被移除。参数越多,限定条件就越多,被移除的范围就越小。
示例&说明
请参考下面这段初始HTML代码:
<input id="btn1" type="button" value="点击1" /><input id="btn2" type="button" value="点击2" /><a id="a1" href="#">CodePlayer</a>
首先,我们为上述button和<a>元素绑定事件,然后使用off()
函数解除事件绑定,相应的代码如下:
function btnClick1(){ alert( this.value + "-1" );}function btnClick2(){ alert( this.value + "-2" );}var $body = $("body");// 为所有button元素的click事件绑定事件处理函数btnClick1$body.on("click", ":button", btnClick1 );// 为所有button元素的click事件绑定事件处理函数btnClick2$body.on("click", ":button", btnClick2 );//为所有a元素绑定click、mouseover、mouseleave事件$body.on("click mouseover mouseleave", "a", function(event){ if( event.type == "click" ){ alert("点击事件"); }else if( event.type == "mouseover" ){ $(this).css("color", "red"); }else{ $(this).css("color", "blue"); }});// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2// 点击按钮,btnClick1照样执行$body.off("click", ":button", btnClick2);// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)// 点击按钮,不会执行任何事件处理函数// $body.off("click", ":button");// 注意: $body.off("click", "#btn1"); 无法移除btn1的点击事件,off()函数指定的选择器必须与on()函数传入的选择器一致。// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数// 点击按钮或链接,都不会触发执行任何事件处理函数// $("body").off("click");// 移除body元素为所有元素的任何事件绑定的所有处理函数// 点击按钮,或点击链接或者鼠标移入/移出链接,都不会触发执行任何事件处理函数// $("body").off( );
运行代码(其他代码请自行复制到演示页面运行)
此外off()
函数还可以只移除指定命名空间的事件绑定。
var $btn1 = $("#btn1");$btn1.on("click.foo.bar", function(event){ alert("click-1");});$btn1.on("click.test", function(event){ alert("click-2");});$btn1.on("click.test.foo", function(event){ alert("click-3");});$btn1.off("click.test"); // 移除click-2、click-3// $btn1.off("click.foo"); // 移除click-1、click-3// $btn1.off("click.foo.bar"); // 移除click-1// $btn1.off("click"); // 移除所有click事件处理函数(click-1、click-2、click-3)// $btn1.off(".foo"); // 移除所有包含命名空间foo的事件处理函数,不仅仅是click事件
0 0
- jQuery.off() 函数详解
- jQuery.off() 函数详解
- jQuery.off()函数用法笔记
- 问题:jquery中的.on() .one() .off()函数
- jQuery jQuery() 函数详解
- jquery off on trigger
- jQuery jQuery.fx.off 属性
- jquery笔记:jQuery.fx.off
- 【jquery】jQuery.extend 函数详解
- [jQuery] jQuery.extend 函数详解
- jquery--jQuery.extend 函数详解
- jQuery核心函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- jQuery.extend 函数详解
- 提高篇第十六讲项目1.2—随机数创长度为16的整型数组,先输元素值为3的倍数的数,再输出所有下标为3的倍数
- python中的变量
- tomcat 不带工程名字访问项目
- 关于我在360笔试中做到的一道毁三观的题(函数与变量同名)
- Spring学习-03:ApplicationContext加载配置文件的两种方式
- jQuery.off() 函数详解
- 历届试题 危险系数 求割点
- DelayQueue实现订单的定时取消
- 七星彩论坛
- 学习ros wiki 中rqt的使用随手记录(二)
- DX9与DX11shader编写中SV_POSITION与POSITION和SV_Target与COLOR之间的区别(二)
- 网易2017实习生招聘笔试题—奇怪的表达式求值
- 天梯赛总结
- 21天精通java基础之Day18常用类(Sting相关)