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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
BootStrap树状图显示功能
2016/11/24 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python的socket编程入门
2018/01/29 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python中一些深不见底的“坑”
2019/06/12 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
django中间键重定向实例方法
2019/11/10 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
小学班主任个人总结
2015/03/03 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
2015年新农合工作总结
2015/03/30 职场文书
学校运动会通讯稿
2015/07/18 职场文书