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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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下MAIL的另一解决方案
2006/10/09 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
学习ExtJS border布局
2009/10/08 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
jquery编写日期选择器
2017/03/16 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
利用Python实现颜色色值转换的小工具
2016/10/27 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
办公室文书岗位职责
2013/12/16 职场文书
幼儿教育感言
2014/02/05 职场文书
中药学专业求职信
2014/05/31 职场文书
老干部工作先进事迹
2014/08/17 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android