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模拟实现C# String.format函数功能代码
Nov 25 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
前端JavaScript大管家 package.json
Nov 02 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js快速排序的实现代码
2013/12/08 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
python的help函数如何使用
2020/06/11 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
协议书模板
2014/04/23 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python