jQuery 事件的命名空间简单了解


Posted in Javascript onNovember 22, 2013

用 jQuery 绑定和解绑事件监听器都是非常简单的。但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间。

看下面这段代码:

$('#element') 
.on('click', doSomething) 
.on('click', doSomethingElse);

像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发。这是使用 jQuery 的一个便利之处,可以随时给元素的同一个事件添加不同的监听器。不像用 onclick 那样,新的监听器会覆盖旧的。

如果你想解绑其中一个监听器,比如 doSomething,怎么做呢?

是这样吗?

$('#element').off('click');

注意!上面这行代码会把元素的 click 事件的所有监听器全部解绑,而这并不是我们要的结果。

幸运的是 jQuery 的 .off() 方法可以接受第二个参数,就像 .on() 一样。只要把监听器函数的名字作为第二个参数传入 .off() 方法,就能够解绑指定的监听器。

$('#element').off('click', doSomething);

但是如果你不知道这个函数的名字,或者你用的是匿名函数:
$('#element').on('click', function() { 
console.log('doSomething'); 
});

怎样才能精确地解绑某一个 click 事件监听器呢?
先上代码:
$('#element').on('click.myNamespace', function() { 
console.log('doSomething'); 
});

这里不只是把 click 事件作为参数传入 .on() 方法,而是给 click 事件指定了一个命名空间,然后监听了这个命名空间里的 click 事件。此时,即使监听器是匿名函数,实际上它也是 “ 有名 ” 的了。现在你可以像下面这样解绑某一个具体的命名空间里的事件监听器了。
$('#element').off('click.myNamespace');

这是 jQuery 为我们提供的又一个方便而强大的功能,它的内部实现肯定很有意思!
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
Js四则运算函数代码
Jul 21 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 #Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 #Javascript
用正则表达式替换图片地址img标签
Nov 22 #Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 #Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 #Javascript
javascript禁用Tab键脚本实例
Nov 22 #Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 #Javascript
You might like
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python中的Classes和Metaclasses详解
2015/04/02 Python
详解Python中的日志模块logging
2015/06/19 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python底层封装实现方法详解
2020/01/22 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
详解python内置模块urllib
2020/09/09 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
运动会通讯稿500字
2014/02/20 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
会计求职简历自我评价
2015/03/10 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers