浅析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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
javascript实现2048游戏示例
May 04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
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连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JS实现的车标图片提示效果代码
2015/10/10 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
优秀教师主要事迹
2014/02/01 职场文书
实习生求职自荐信
2014/02/07 职场文书
班班通项目实施方案
2014/02/25 职场文书
绿色环保标语
2014/06/12 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
单位租房协议书范本
2014/12/04 职场文书
西湖英语导游词
2015/02/06 职场文书
早会开场白台词大全
2015/06/01 职场文书
党支部审查意见
2015/06/02 职场文书
我爱我班主题班会
2015/08/13 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python