浅析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 17 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
使用vue构建多页面应用的示例
Oct 22 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
React组件生命周期详解
2017/07/03 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JavaScript判断数组类型的方法
2019/10/23 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python最基本的输入输出详解
2015/04/25 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
如何基于python实现不邻接植花
2020/05/01 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
会计顶岗实习心得
2014/01/25 职场文书
男女朋友协议书
2014/04/23 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
婚宴领导致辞
2015/07/28 职场文书
患者身份识别制度
2015/08/06 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
Python基础之进程详解
2021/05/21 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
python随机打印成绩排名表
2021/06/23 Python
Python 绘制多因子柱状图
2022/05/11 Python