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 相关文章推荐
编写兼容IE和FireFox的脚本
May 18 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
很好用的js日历算法详细代码
2013/03/07 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python ORM编程基础示例
2020/02/02 Python
python算的上脚本语言吗
2020/06/22 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
学校课外活动总结
2014/05/08 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
物资采购方案
2014/06/12 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
自荐信格式模板
2015/03/27 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis