浅析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 相关文章推荐
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
小程序实现搜索框
Jun 19 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
tensorboard显示空白的解决
2020/02/15 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
python 发送get请求接口详解
2020/11/17 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
初中科学教学反思
2014/01/21 职场文书
高中军训感言800字
2014/03/05 职场文书
保证书范文大全
2014/04/28 职场文书
小学生读书活动总结
2014/06/30 职场文书
数学教师个人工作总结
2015/02/06 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python