浅析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 相关文章推荐
JS 修改URL参数(实现代码)
Jul 08 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php eval函数一句话木马代码
2015/05/21 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
自我鉴定怎么写
2013/12/05 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS