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

示例&说明

请参考下面这段初始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事件

jquery之 off()方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. Debian自带浏览器IceWeasel的中文化

    Iceweasel浏览器简体中文组件 # Iceweasel是Debian中Mozilla Firefox浏览器的一个再发布版#英语很菜,所以浏览器菜单也要是中文的sudo apt-get insta ...

  2. sql语句删除数据表重复字段的方法

    大家都可能遇到字段重复的情况,网上很多人在找方法,也给出了一些方法,但是有的方法是误导大家,铁牛写出以下方法,方便大家使用 1.通过group by把重复的字段筛选出来,并建立临时表tmp 1 cre ...

  3. notification 通知

    1. 定义一个方法 -(void) update{ } 2. 对象注册,并关连消息 [[NSNotificationCenter defaultCenter]addObserver:self sele ...

  4. 图书管理之HTML5压缩旋转裁剪图片总结

    整体思路  : 在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的 ...

  5. 关于全站https必要性http流量劫持、dns劫持等相关技术

    关于全站https必要性http流量劫持.dns劫持等相关技术 微信已经要求微信支付,申请退款功能必须12月7号之前必须使用https证书了(其他目前为建议使用https),IOS也是2017年1月1 ...

  6. Intel Edison 参考链接2

    Edison的breakout板子的引脚: http://iotdk.intel.com/docs/master/mraa/java/edison.html Edison的引脚 http://www. ...

  7. UTF8转码, 考虑利用app转好再传, CC2541转太麻烦了...

  8. java简单的数据库查询(SQLServer数据库)

    1.数据库链接类 import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; pu ...

  9. freemarker为null处理

    http://599073210-qq-com.iteye.com/blog/1401731

  10. Linux命令学习手册-printf命令(转)

    分类: LINUX 参考资料:http://sns.linuxpk.com/space-566-do-blog-id-15819.html printf FORMAT [ARGUMENT]... pr ...