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 dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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&mysql(四)
2006/10/09 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
Python3 Random模块代码详解
2017/12/04 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python识别验证码图片实例详解
2020/02/17 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
公司运动会策划方案
2014/05/25 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
党的作风建设心得体会
2014/10/22 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
pandas中对文本类型数据的处理小结
2021/11/01 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript