jQuery中绑定事件的命名空间详解


Posted in Javascript onApril 05, 2011

在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释?

先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍:

.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象, 比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。

jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简 化.bind('click')。一共有以下这 些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

任何作为type参数的字符串都是合法的;如果一个字符串不是原生的JavaScript事件名, 那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发,但可以通过使用.trigger()或 者.triggerHandler()在其他代码中手动触发。

如果type参数的字符串中包含一个点(.)字符, 那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说,如果执 行 .bind('click.name', handler) ,那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。命名空 间允许我们取消绑定或者触发一些特定类型的事件,而不用触发别的事件。参考unbind()来获取更多信息。

当一个事件传到一个元素上,所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件 处理函数,总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后,事件继续沿着普通的事件冒泡途径上浮。

jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候 可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。

但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论 上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有 可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind('click') 加 上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素 其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供 function作为第二个参数来指 定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添 加 .something 来区分自己这部分行为逻辑范围。

比如 用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你 可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可 释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名 空间所绑定的事件行为。

同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通 过 .unbind('.myCustomRoutine') 即可。

要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果 用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别 为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不 是 "myCustomRoutine 下的 myCustomSubone 子空间"。

jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。

但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind('click') 加上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供function作为第二个参数来指定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分自己这部分行为逻辑范围。

比如用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名空间所绑定的事件行为。

同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通过 .unbind('.myCustomRoutine') 即可。

要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。

Javascript 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 #Javascript
Jquery判断IE6等浏览器的代码
Apr 05 #Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 #Javascript
JQuery中$之选择器用法介绍
Apr 05 #Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 #Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 #Javascript
Ajax 数据请求的简单分析
Apr 05 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python合并文本文件示例
2014/02/07 Python
简单实现python数独游戏
2018/03/30 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
pip安装python库的方法总结
2019/08/02 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
债务纠纷委托书
2014/08/30 职场文书
贷款担保书
2015/01/20 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android