jQuery:unbind方法的使用详解


Posted in jQuery onAugust 14, 2017

jQuery:unbind方法的使用详解

一、前言

unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序。比如:$(‘a').click(function(){})可以通过unbind解绑。用原生addEventListener以及IE下的attachEvent注册的事件以及使用onclick/onmouseover属性绑定的事件不能通过unbind进行解绑。

例如:

以下的事件可以通过unbind解绑:

$('a').click(function(){});
$('a').bind('click',function(){})

以下的事件不可以通过unbind解绑

var a = document.getElementById('a');
a.addEventListener(a,function(){},false);
a.onclick = function(){}

二、使用方式:

传入一个或者多个事件名称字符串,可以解绑该元素上指定的处理事件。

例如:

//解绑所有a上的click事件
  $('a').unbind('click');
  //解绑a上的所有mouseover以及mouseoverout事件
  $('a').unbind('mouseover mouseout');

以上方式比较粗暴,如果在多模块开发中,可能会直接把别的模块注册的处理函数给解绑了。所以可以采用命名空间的方式进行解绑。

例如:

$('a').unbind('click.myspace')
  $('a').unbind('mouseover.myspace,mouseout.myspace)

使用事件处理程序的引用进行解绑。此时第一个参数是事件名称,第二个参数是事件处理函数名称

function handler(){
  alert('hello');
}
$('a').bind('click',handler);
$('a').unbind('click',handler);

传入一个对象给unbind,取消该对象的所有key的名称对应的事件,value是绑定的事件处理函数名称。如下: 

$('a').unbind({
    mouseover: mouseoverHandler,
    mouseout: mouseoutHandler
  });

传入一个jQuery Event对象给unbind,也可以解绑该event对应的处理函数。例如:

$('a').click(function(event){
    if(条件满足){
      $('a').unbind(event);
    }
  });

注意:调用unbind(event)方法就相当于调用unbind(事件类型,事件处理函数名称)

以上就是jQuery:unbind方法的介绍,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
You might like
基于php-fpm的配置详解
2013/06/03 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
python append、extend与insert的区别
2016/10/13 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
介绍一下#error预处理
2015/09/25 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
党员活动日总结
2014/05/05 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
大学生赌博检讨书
2014/09/22 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
1000字打架检讨书
2014/11/03 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Go 语言结构实例分析
2021/07/04 Golang