浅析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压缩利器
Feb 20 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
js代码编写无缝轮播图
Sep 13 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数组实例总结与说明
2011/08/23 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
ES6的新特性概览
2016/03/10 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
Python批量修改文本文件内容的方法
2016/04/29 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
学校岗位设置方案
2014/01/16 职场文书
物流业务员岗位职责
2014/02/08 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
学校节能减排方案
2014/06/13 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Win11查看设备管理器
2022/04/19 数码科技