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字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
jquery自适应布局的简单实例
May 28 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
vue中的inject学习教程
Apr 24 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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 session有效期问题
2009/04/26 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python使用Matplotlib绘制分段函数
2018/09/25 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
酒店营销策划方案
2014/02/07 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
电台编导求职信
2014/05/06 职场文书
大学生工作自荐书
2014/06/16 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android