浅析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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 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生成plist数据的方法
2015/06/16 PHP
PHP闭包函数详解
2016/02/13 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
VUE重点问题总结
2018/03/19 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
PHP面试题集
2016/12/18 面试题
毕业生医学检验求职信
2013/10/16 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
一年级班主任感言
2014/03/08 职场文书
中式结婚主持词
2014/03/14 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
母亲节寄语大全
2015/02/27 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书