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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
javascript canvas实现雨滴效果
Jun 09 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之第一天
2006/10/09 PHP
菜鸟学PHP之Smarty入门
2007/01/04 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
两个php日期控制类实例
2014/12/09 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python如何让类支持比较运算
2018/03/20 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python操作gitlab API过程解析
2019/12/27 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
2014年干部作风建设总结
2014/10/23 职场文书
python爬虫--selenium模块
2021/03/31 Python
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Redis命令处理过程源码解析
2022/02/12 Redis
Java 数据结构七大排序使用分析
2022/04/02 Java/Android