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 autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
Php图像处理类代码分享
2012/01/19 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Django数据统计功能count()的使用
2020/11/30 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
存储过程和函数的区别
2013/05/28 面试题
校园歌手大赛策划书
2014/01/17 职场文书
小学亲子活动总结
2014/07/01 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技