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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
javaScript中的空值和假值
Dec 18 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
Python正则表达式介绍
2012/08/06 Python
Python中title()方法的使用简介
2015/05/20 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
运动会广播稿20字
2015/08/19 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS