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

在没有看到这篇 文章之前,我一直不知道原来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 子空间"。

(0)

相关推荐

  • jquery事件机制扩展插件 jquery鼠标右键事件

    因为最近技术长进缓慢,也没高手带,只能靠自己了,所以想仿个WEBQQ来锻炼下自己.做之前最好先把必要的东西准备好.jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直

  • jQuery事件绑定.on()简要概述及应用

    前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data

  • 实例讲解jQuery中对事件的命名空间的运用

    用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: $("#element") .on("click", doSomething) .on("click", doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发

  • jQuery 事件的命名空间简单了解

    用 jQuery 绑定和解绑事件监听器都是非常简单的.但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间. 看下面这段代码: 复制代码 代码如下: $('#element') .on('click', doSomething) .on('click', doSomethingElse); 像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发.这是使用 jQuery 的

  • jQuery的缓存机制浅析

    前不久在研究jQuery的动画队列的时候,发现jQuery的缓存系统也很强大,尽管以前也稍微接触过,但一直都没有深入研究过.jQuery的缓存系统在外部应用的时候都比较简单,比如要将某个URL数据存到缓存中只要这么写: 复制代码 代码如下: var val = "stylechen.com";$("div").data( "url" ); // 返回undefined$("div").data( "url"

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • jQuery命名空间与闭包用法示例

    本文实例讲述了jQuery命名空间与闭包用法.分享给大家供大家参考,具体如下: /* * 服务公司用户汇总,审核 */ (function() { "use strict"; var companyList=new Object();//声明命名空间 //时间戳格式化为时间 companyList.getLocalTime = function(nS){ return new Date(parseInt(nS)).toLocaleString().substr(0,17); } //节

  • jquery新的绑定事件机制on方法的使用方法

    浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的

  • jquery利用命名空间移除绑定事件的方法

    本文实例讲述了jquery利用命名空间移除绑定事件的方法.分享给大家供大家参考.具体分析如下: 最近研究jquery,发现了一个简单移除绑定事件的方法,命名空间. 例子很简单. 这里我绑定了三个事件,分别是click,mouseover和dblclick事件 其中click和mouseover事件我加入了命名空间,而dblclick没有加入命名空间. 利用一个button移除了绑定的事件. 这样避免了重复的使用bind和unbind方法,让你的代码看起来更简洁明了. 复制代码 代码如下: <sc

  • javascript,jquery闭包概念分析

    但javascript我是经常要用,所以是要懂这里面的概念. 其实javascript里的闭包概念很简单,就是函数用到外部变量,不需要传参就可以获取. 举个例子: 复制代码 代码如下: <script> var sMessage = "Hello world"; function sayHello(){ alert(sMessage); } sayHello(); addNumber(1,2); var iBaseNum = 10; function addNumber(i

  • jquery 事件冒泡的介绍以及如何阻止事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 复制代码 代码如下: <%@PageLanguage="C#&q

  • 在jquery中处理带有命名空间的XML数据

    但不幸的是,很多服务返回的数据仍然是XML格式的. jquery对于xml这种数据的处理是内置支持的,这一点没有任何问题.但前提是返回的数据没有带任何命名空间.例如下面这份数据 复制代码 代码如下: <?xml version="1.0" encoding="utf-8" ?> <data> <Employee id="1" firstName="ares" lastName="chen

随机推荐