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中的end()使用方法
Jul 10 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
关于this和self的使用说明
2010/08/01 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
自我评价如何写好?
2014/01/05 职场文书
奥巴马演讲稿
2014/01/08 职场文书
岗位聘任报告
2015/03/02 职场文书
反腐倡廉观后感
2015/06/08 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python