今日在工作的时候,遇上了一些和事件绑定有关的问题无法解决,于是在网上找到了以下资料,稍加整理了下。

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

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

这时候如果直接用 .click() 或者 .bind('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事件绑定的心得的更多相关文章

  1. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  2. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

  3. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  4. JQuery事件绑定,bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  5. jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate ...

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

    原文地址:http://www.jquerycn.cn/a_5346     前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...

  7. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  8. 关于jQuery事件绑定

    转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...

  9. jQuery事件绑定和委托

    可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: $("#div1"). ...

随机推荐

  1. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  2. SQL Server递归实例

    例子一 -- ============================================= -- 根据EID返回其下属的EID,Layer=1表示直接下属,NULL返回所有下属 -- s ...

  3. Delphi XE8帮助中的REST相关内容。

    Delphi XE8的离线帮助是我见过的最好的Delphi帮助文档了,内容相当详细和丰富,几乎涵盖了Delphi的方方面面!! Delphi XE8的帮助文档在哪里?“XE8安装目录\Help\Doc ...

  4. sonar严重性与颜色对应关系

  5. str中的join方法; set集合;深浅拷贝

    一.str中的join方法 1,用join可以吧列表转换为字符串 将列表转换成字符串. 每个元素之间用_拼接 s = "_". join(['德玛', ''赵信'', '易']) ...

  6. [ActionScripte 3.0] swf和网页通信

    很多时候,我们需要将swf放到网页加载,并且将相应的资源都放到网页上,在网页中加载swf通常是通过"*.swf?p=..&p2=..."这样的方式来调用这个swf和传参数的 ...

  7. 一步一步带你安装史上最难安装的 vim 插件 —— YouCompleteMe

    YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim.参考: https://github ...

  8. Struts2框架action层学习心得体会

    在struts2框架中,当action处理完之后,就应该向用户返回结果信息,该任务被分为两部分:结果类型和结果本身. 结果类型提供了返回给用户信息类型的实现细节.结果类型通常在Struts2中就已预定 ...

  9. c++11 perfect forwarding

    完美转发是c++11 引入右值引用之后,在template 中的延伸. 顾名思义,完美转发是将参数不改变属性的条件下,转发给下一个函数. 因为普通函数的参数一旦具名,始终都是lvalue. 如果把rv ...

  10. vue关闭令人抓狂的ESlint 语法检测配置方法

    随便改个vue 一堆报错 其实我并不反对这些语法检测,但是像许多反个人意愿的那就真的不得不吐槽了,比如vue-cli脚手架创建的默认eslint规则: 代码末尾不能加分号 ; 代码中不能存在多行空行 ...