`
axl234
  • 浏览: 268837 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
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也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的... jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简 化

    JQuery详解jQuery的bind方法

    通过合理的使用命名空间以及了解如何使用 `unbind()` 来解除绑定,可以帮助开发者更高效地管理和控制页面中的事件行为。然而,随着 jQuery 的发展,现代浏览器提供的原生 API 也变得越来越强大,因此在新项目中考虑...

    jQuery中的on与bind绑定事件区别实例详解

    events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data...

    jQuery.extend 函数详解

    ### jQuery.extend 函数详解 #### 一、概述 在JavaScript前端开发中,jQuery是一个非常流行的库,它简化了许多常见的操作,比如DOM操作、事件处理、AJAX交互等。`jQuery.extend`是jQuery提供的一个用于扩展jQuery...

    jQuery插件编写步骤详解

    jQuery插件通常以一个立即执行的函数开始,这样可以确保插件的代码不会污染全局命名空间。这个函数接收`$`作为参数,这样在函数内部就可以直接使用jQuery对象,而无需在外部引入。 ```javascript (function ($) ...

    JQuery上传插件Uploadify使用详解

    JQuery Uploadify插件是一个基于JQuery的文件上传组件,它提供了一种用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。在ASP.NET环境中使用Uploadify,你需要按照以下步骤进行配置和编码。 首先,...

    jQuery bind事件使用详解

    本文将深入探讨`bind`方法的使用,包括它的基本用法、多事件绑定、自定义事件和命名空间等特性。 首先,`bind`方法的基本用法是将一个或多个事件处理器(函数)附加到指定的元素。例如,以下代码会在用户点击ID为`...

    Jquery uploadify上传插件使用详解

    首先,需要创建一个Web项目,命名为JQueryUploadDemo,并下载最新的Uploadify版本解压后添加到项目中。然后,在项目中添加UploadHandler.ashx文件,该文件是用来处理文件上传的服务器端脚本。接着,创建一个名为...

    jQuery.js执行过程分析

    `将jQuery绑定到全局变量`$`,方便外部调用。这样,开发者可以通过`$`或`jQuery`来访问和使用jQuery的功能。 3. **原型链扩展**: jQuery通过在`jQuery.prototype`(即`jQuery.fn`)上添加方法,实现了方法的共享...

    详解jQuery插件开发方式

    1. 使用`$.extend(object)`方法扩展jQuery命名空间。这种方法添加的函数是全局的,可以通过`$`符号直接调用。例如,在代码中定义了一个`fun1`函数,然后通过`$.fun1()`即可执行。 2. 使用`$.fn.extend(object)`扩展...

    jquery高级编程的最佳实践详解

    ### jQuery高级编程最佳实践详解 #### 1. CDN的使用 在进行Web开发时,推荐使用CDN(内容分发网络)来加载jQuery库。通过CDN加载jQuery不仅速度快,因为文件从靠近用户的服务器提供,还有助于减轻网站的服务器负载...

    jQuery内核详解与实践_1.pdf

    jQuery使用事件代理的方式减少事件监听器的数量,同时通过事件命名空间来管理多个事件处理器,避免冲突。 ##### 3.4 AJAX优化 jQuery对AJAX请求进行了封装,支持多种HTTP请求方式,并内置错误处理逻辑,简化了网络...

    jQuery中的编程范式详解

    jQuery提供了统一的事件绑定和触发机制,如`.on()`和`.trigger()`。它简化了跨浏览器的事件处理,允许开发者使用一致的方式来处理点击、鼠标移动等事件。 6. 动画效果 jQuery的动画功能是其受欢迎的一大原因,`....

    jquery3.2.1官方正版

    - **事件处理**: jQuery 提供了统一的事件处理方法,如`.on()` 用于绑定事件,`.off()` 用于解除绑定,`.trigger()` 用于触发事件。 - **动画效果**: 使用 `.fadeIn()`, `.slideUp()`, `.animate()` 等方法可以轻松...

    jQuery文章.rar

    《jQuery技术详解与实战应用》 一、jQuery选择符 jQuery的选择符是其强大功能的基础,它极大地简化了DOM元素的选择。与JavaScript原生的选择器相比,jQuery的选择器更加直观和高效。例如,`$("#id")`用于选取ID为...

Global site tag (gtag.js) - Google Analytics