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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 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中数组的三种排序方法分享
2012/05/07 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP7 新增功能
2021/03/09 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
js动态引入的四种方法
2018/05/05 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python内存管理机制原理详解
2019/08/12 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
软件工程师岗位职责
2013/11/16 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang