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. overfit & underfit

    原文:http://blog.csdn.net/yhdzw/article/details/22733317 过拟合:1)简单理解就是训练样本的得到的输出和期望输出基本一致,但是测试样本输出和测试样本 ...

  2. Ado.net连接池 sp_reset_connection 概念

    什么是连接池? 正常情况下,每次访问数据库都会打开和关闭,中断物理连接后需要再次进行物理连接.这样操作会浪费资源 使用连接池,主要的区别在于,不需要中断物理连接,即每次中断请求时spid还是存在! 原 ...

  3. yii2多语言设置

    yii2的多语言切换功能 1.页面添加语言切换按钮,如下图: 代码如下: <ul>       <li>           <a href="javascri ...

  4. yii2中表单的字段标签名称

    1.以登陆页面为例,默认是英文的,在loginForm.php中添加attributeLabels,可以变成中文 具体代码如下: public function attributeLabels(){  ...

  5. php使用过滤器filter_var轻松验证邮箱url和ip地址等

    以前使用php的时候还不知道有过滤器filter这玩意,那时候判断邮箱.url和ip地址格式是否符合都是用正则表达式.后来随着使用的逐渐深入,才知道在php中也可以使用内置的函数库过滤器filter来 ...

  6. php获取网页中图片并保存到本地

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: save_img("http://www.jbxue.com" ?>

  7. 使用uiautomatorviewer和uiautomator来做android的UI测试

    来自:http://university.utest.com    作者:Angelos Nakulas (All Authored Courses)      译者:Elaine00 目录 简介 什 ...

  8. Mongodb 笔记09 备份、部署MongoDB

    备份 1. 只有在有信心能在紧急情况下完成迅速部署的情况下,备份才是有用的.所以,无论选择了哪种备份技术,一定要对备份及恢复备份的操作进行练习,知道了然于心. 2. 通常情况下,应对副本集的非主节点( ...

  9. sql数据库(资料库)的基本操作

    1 Character Set与Collation 任何资讯技术在处理资料的时候,如果只是单纯的数值和运算,那就不会有太复杂的问题:如果处理的资料是文字的话,就会面临世界上各种不同语言的问题.以资料库 ...

  10. 在HTML页面获取当前系统时间

    <script language="javascript"> function getCurDate() { var d = new Date(); var week; ...