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中[attribute!=value]选择器用法实例
Dec 31 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
vuex进阶知识点巩固
May 20 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS和函数式语言的三特性
2014/03/05 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python实现在线翻译
2020/06/18 Python
Python实现自动整理文件的脚本
2020/12/17 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
10条PHP编程习惯
2014/05/26 面试题
保护野生动物倡议书
2014/05/16 职场文书
学校读书活动总结
2014/06/30 职场文书
法人代表证明书
2014/09/18 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
小学运动会报道稿
2015/07/22 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
python开发制作好看的时钟效果
2022/05/02 Python