浅析jquery unbind()方法移除元素绑定的事件


Posted in Javascript onMay 24, 2016

unbind()方法可以移除元素已绑定的事件,它的调用格式如下:

$(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。

语法 

unbind()函数主要有以下两种形式的用法:

用法一:

jQueryObject.unbind( [ events [, handler ]] )

移除当前匹配元素的events事件绑定的事件处理函数handler。

用法二:

jQueryObject.unbind( eventObject )

为指定事件处理函数传入的Event对象,用于移除对应的事件处理函数。

参数

参数 描述

events 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。

handler 可选/Function类型指定的事件处理函数。

eventObject Object类型一个Event对象,用于移除传入该对象的事件处理函数。

jQuery 1.4.3 新增支持参数handler可以为false。用于移除绑定事件时,handler参数为false值的事件处理函数。

如果省略参数handler,则移除匹配元素指定类型的事件上绑定的所有事件处理函数。

如果省略了所有参数,则表示移除匹配元素上为任何元素绑定的任何事件类型的任何事件处理函数。 

返回值

unbind()函数的返回值为jQuery类型,返回当前jQuery对象本身。

实际上,unbind()函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数都将被移除。参数越多,限定条件就越多,被移除的范围就越小。 

示例&说明 

请参考下面这段初始HTML代码:

 

<input id="btn1" type="button" value="点击1" /> 
<input id="btn2" type="button" value="点击2" /> 
<a id="a1" href="#">CodePlayer</a>

首先,我们为上述button和<a>元素绑定事件,然后使用unbind()函数解除事件绑定,相应的代码如下:

function btnClick1(){ 
  alert( this.value + "-1" ); 
} 
 
function btnClick2(){ 
  alert( this.value + "-2" ); 
} 
 
var $buttons = $(":button"); 
 
// 为所有button元素的click事件绑定事件处理函数btnClick1 
$buttons.bind( "click", btnClick1 ); 
 
// 为所有button元素的click事件绑定事件处理函数btnClick2 
$buttons.bind( "click", btnClick2 ); 
 
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数 
$("a").bind( "click mouseover mouseleave", function(event){ 
  if( event.type == "click" ){ 
    alert("点击事件"); 
  }else if( event.type == "mouseover" ){ 
    $(this).css("color", "red"); 
  }else{ 
    $(this).css("color", "blue");    
  } 
}); 
 
 
// 移除为所有button元素的click事件绑定的事件处理函数btnClick2 
// 点击按钮,只执行btnClick1 
$buttons.unbind("click", btnClick2); 
 
 
// 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2) 
// 点击按钮,不会执行任何事件处理函数 
// $buttons.unbind("click"); 
 
 
// 只移除为btn1元素的click事件绑定的所有事件处理函数 
 // btn2元素的click事件仍然有效 
// $("#btn1").unbind("click"); 
 
// 移除为所有a元素的任何事件绑定的所有处理函数 
// 点击链接,或用鼠标在链接上移入、移出,都不会触发执行任何事件处理函数 
// $("a").unbind( );
unbind()函数还可以根据传入的事件对象来移除函数。以下jQuery代码只允许第一次点击按钮【点击1】时弹出提示框,之后立即移除该点击事件。
var $btn1 = $("#btn1"); 
$btn1.bind("click", function(event){ 
  alert("只执行一次!"); 
  $(this).unbind( event ); // 移除当前事件处理函数  
}); 
此外,unbind()函数还可以只移除指定命名空间的事件绑定。 
 
var $buttons = $(":button"); 
 
// 为所有button元素的click事件绑定事件处理函数 
$buttons.bind( "click.foo.bar", function btnClick1(){ 
  alert( "click-1" ); 
} ); 
 
// 为所有button元素的click事件绑定事件处理函数 
$buttons.bind( "click.test.bar", function btnClick1(){ 
  alert( "click-2" ); 
} ); 
 
 
// 移除包含命名空间foo的click事件绑定的事件处理函数 
$buttons.unbind( "click.foo" ); // 移除click-1 
 
//移除包含命名空间bar的click事件绑定的事件处理函数 
// $buttons.unbind( "click.bar" ); // 移除click-1和click-2 
 
//移除包含命名空间test的click事件绑定的事件处理函数 
// $buttons.unbind( "click.test" ); // 移除click-2 
 
// 移除所有button元素的click事件绑定的所有事件处理函数 
// $buttons.unbind("click"); // 移除click-1和click-2

以上这篇浅析jquery unbind()方法移除元素绑定的事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
js 编写规范
Mar 03 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
javascript中的面向对象
Mar 30 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
使用jQuery实现购物车
Oct 29 jQuery
jQuery unbind 删除绑定事件详解
May 24 #Javascript
深入理解jQuery之防止冒泡事件
May 24 #Javascript
30分钟快速掌握Bootstrap框架
May 24 #Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 #Javascript
深入理解jQuery中的事件冒泡
May 24 #Javascript
jQuery 弹出层插件(推荐)
May 24 #Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python实现大文件排序的方法
2015/07/10 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
对python的输出和输出格式详解
2018/12/08 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
法律专业应届本科毕业生求职信
2013/10/25 职场文书
中专生自我鉴定
2013/12/17 职场文书
大学生暑期实践报告
2015/07/13 职场文书
家属联谊会致辞
2015/07/31 职场文书
七个Python必备的GUI库
2021/04/27 Python
Python初学者必备的文件读写指南
2021/06/23 Python
浅谈redis整数集为什么不能降级
2021/07/25 Redis
JS数组去重详情
2021/11/07 Javascript