在没有看到这篇 文章之前,21视频教程网编辑一直不知道原来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 子空间"。

转载于:https://www.cnblogs.com/mizzle/archive/2012/02/06/2339588.html

jQuery中绑定事件的命名空间详解相关推荐

  1. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  2. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  3. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  4. html移除click事件绑定,带你了解JQuery中绑定事件(bind())和移除事件(unbind())...

    本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享,这里推荐给有需要的小伙伴们参考下. 有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事 ...

  5. php delegate,jQuery中delegate()方法的用法详解

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).d ...

  6. JS中的事件委托 / 代理详解

    [前言] 事件委托/代理是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的 [主体] 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用 ...

  7. html学习 - jquery事件监听详解

    html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jqu ...

  8. C#中WPF ListView绑定数据的实例详解

    C#中WPF ListView绑定数据的实例详解 发布时间: 2019-03-09 19:29:46 来源: 互联网 作者: 晨曦888 栏目: C#教程 点击: 298 这篇文章主要介绍了C#中WP ...

  9. c语言中常用命名空间,C语言命名空间详解.doc

    C语言命名空间详解 C语言命名空间详解 C语言命名空间分析准则: 在同一命名空间.相同作用域中,任何名字须具有唯一性 每个结构和联合内部都有自己的命名空间(独立于其他空间) 结构标签.联合标签.枚举标 ...

  10. jquery unbind 异步_JQuery中绑定事件(bind())和移除事件(unbind())

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: $(fu ...

最新文章

  1. 解题报告:CF1307D Cow and Fields(最短路、最优解不等式化简)
  2. MySQL语法规范介绍
  3. java mock什么意思_java @Mock, @MockBean 与 Mockito.mock( ) 之间的差异
  4. 挑战程序设计竞赛_实力爆棚!2019年,华中科技大学拿下亚洲区竞赛金牌4枚!...
  5. 蓝桥 BEGIN4 - Fibonacci数列
  6. 宝塔面板搭建autoPicCdn:一款基于jsdelivr-Github的免费CDN图床
  7. 【有内鬼,终止交易】风靡朋友圈的壁纸,实现代码竟如此简单 | 原力计划
  8. Web Dev领域:2017精彩事件和 2018预测
  9. 4个月掌握核心技术 成为云计算行业专家
  10. tomcat编码配置gbk_修改Tomcat编码方式的两种方法
  11. 干眼症久治不愈?反复发作,小心可能不是干眼症!
  12. 利用canvas制作水印(兼容移动端哦)
  13. 斐波那契数列c语言while,C语言数据结构递归之斐波那契数列
  14. 国潮风彩色手绘年俗年画春节插画素材
  15. 重磅!谷歌突然宣布!百度、滴滴懵了
  16. 【算法设计与分析】HDU-1108 C++诡异的楼梯(BFS迷宫最短路径)
  17. explain的使用及详解
  18. [CTFSHOW]命令执行55-74
  19. raid5常见故障数据恢复方法/服务器数据恢复常用方法
  20. 马科维茨的均值一方差组合模型(转载)

热门文章

  1. c语言发票的编码,关于增值税发票中商品税收分类编码对应的简称
  2. java+catch块不执行_Java异常处理机制:try...catch...的执行流程
  3. 实习踩坑之路:Git无法拉取最新分支代码?怎么解决?
  4. Gson之TypeAdapter的工作原理分析(1)
  5. ajax获取inputname值,jQuery - 获取ajax POST的表单值
  6. 图片服务器虚拟路径,springboot2.0图片上传至本地或服务器并配置虚拟路径的方法.pdf...
  7. linux导入通达oa数据库,将通达OA迁移到linux平台
  8. vue.js 多页 php,vue-cli创建的项目,配置多页面的实现方法
  9. java数字后面加f_java 数字后面 f 和 l
  10. matlab三维矩阵_Matlab绘制三维表面模型说明