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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 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 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
Vue编写多地区选择组件
2017/08/21 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python中GIL的使用详解
2018/10/03 Python
Python timeit模块的使用实践
2020/01/13 Python
Python接口测试get请求过程详解
2020/02/28 Python
python求前n个阶乘的和实例
2020/04/02 Python
在python中使用nohup命令说明
2020/04/16 Python
Python 使用office365邮箱的示例
2020/10/29 Python
this关键字的作用
2016/01/30 面试题
水务局局长岗位职责
2013/11/28 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
房屋买卖协议书
2014/04/10 职场文书
关爱留守儿童标语
2014/06/18 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript