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的eval JSON object问题
Nov 15 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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编写大型网站问题集
2007/03/06 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
关于js类的定义
2011/06/28 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
JS实现分页导航效果
2020/02/19 Javascript
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python读取图片任意范围区域
2019/01/23 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python梯度下降算法的实现
2020/02/24 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
浅谈Python 函数式编程
2020/06/20 Python
Python利用命名空间解析XML文档
2020/08/10 Python
亲子拓展活动方案
2014/02/20 职场文书
幼儿教师培训感言
2014/03/08 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android