`
wmhcymx
  • 浏览: 21219 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jQuery Mobile 的.bind()、.live()和.delegate()之间区别

阅读更多

jQuery的.bind()、.live()和.delegate()之间区别

来源: 译言网  发布时间: 2011-03-20 14:24  阅读: 5964 次  推荐: 8   原文链接   [收藏]  
摘要:jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误。

  基本要素

jQuery 

  DOM树

  首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:

jQuery

  事件冒泡(又称事件传播)

  当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

  $('a').bind('click'function() { alert("That tickles!") });

  因此一个单击操作会触发alert函数的执行。

jQuery

  click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

jQuery

  在操纵DOM的语境中,document是根节点。

  现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

  .bind()

  $('a').bind('click'function() { alert("That tickles!") });

  这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

  .live()

  $('a').live('click'function() { alert("That tickles!") });

  JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

  live方法还可以被绑定到具体的元素(或context)而不是document上,像这样:

  $('a', $('#container')[0]).live(...);

  .delegate()

  $('#container').delegate('a''click'function() { alert("That tickles!") });

  JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

  可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。

  为什么.delegate()要比.live()好用

  基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

  $('a').live('click'function() { blah() }); 
  // 或者 
  $(document).delegate('a''click'function() { blah() });

  速度

  后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断,但是$()函数并未知道被链接的方法将会是.live()。

  而另一方面,delegate方法仅需要查找并存储$(document)元素。

  一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

  灵活性和链能力

  live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。

  仅支持CSS选择器

  最后一点,live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。

  欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。

  更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

  为什么选择.live()或.delegate()而不是.bind()

  毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:

   为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

   如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

   或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

  停止传播

  最后一个我想做的提醒与事件传播有关。通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

  $('a').bind('click'function(e) { 
  e.preventDefault(); 
  // 或者 
  e.stopPropagation(); 
  });

  不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。

分享到:
评论

相关推荐

    jakarta.xml.bind-api-2.3.3-API文档-中文版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.3.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.3-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.3-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    jakarta.xml.bind-api-2.3.2-API文档-中文版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.2.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.2-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.2-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    jakarta.xml.bind-api-2.3.3-API文档-中英对照版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.3.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.3-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.3-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    jakarta.xml.bind-api-2.3.2-API文档-中英对照版.zip

    赠送jar包:jakarta.xml.bind-api-2.3.2.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.2-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.2-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...

    javax.xml.bind jdk1.5缺包

    `javax.xml.bind`是Java中的一个标准API,主要用于XML数据绑定,它允许Java对象和XML文档之间进行互操作。`com.sun.xml.bind.v2.ContextFactory`是这个模块的核心类,负责生成和管理Java对象与XML之间的绑定上下文。...

    javax.xml.bind.jar

    javax.xml.bind.jar

    Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...

    Unable to load class ‘javax.xml.bind.JAXBException‘(csdn).pdf

    在Android Studio中遇到"Unable to load class ‘javax.xml.bind.JAXBException‘"的错误,通常是由于Java运行时环境(JRE)或开发工具包(JDK)与项目的兼容性问题导致的。`javax.xml.bind.JAXBException`是Java的...

    javax.xml.bind.jar 包

    在集成阿里云移动推送时,部署到服务器的时候遇到了java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter 错误,产生原因是缺少javax.xml.bind.DatatypeConverter

    javax.xml.bind.jar和三个sqljdbc4x.jar

    javax.xml.bind.jar和三个sqljdbc4x.jar;实测可用。用于sqlserver连接和出现Java 9 及以上 eclipse 链接 SQL数据库 抛出 java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter 异常

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    在讨论jQuery中的事件绑定方法时,.bind()、.live()和.delegate()是三种重要的技术。为了深入理解这些方法之间的区别和特点,首先需要对DOM事件的传播机制有所了解。在DOM事件模型中,事件传播分为捕获和冒泡两个...

    xml.bind.jar包

    java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter 错误,产生原因是缺少javax.xml.bind.DatatypeConverter

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    例如,使用`.on()`替代`.bind()`, `.delegate()`, 和`.live()`可以减少内存占用并提高性能。另外,避免全局变量的使用,以及合理地组织和合并CSS选择器,都能提升页面运行效率。 在实际应用中,jQuery广泛应用于...

    jakarta.xml.bind-api-2.3.2.jar

    java运行依赖jar包

    最新版JQuery-jquery-3.2.1.min.js

    - **事件处理**:`on()`, `off()`, `trigger()`, `bind()`, `unbind()`等用于绑定、解绑和触发事件。 - **动画**:`fadeIn()`, `fadeOut()`, `slideToggle()`, `animate()`等提供平滑的动画效果。 - **Ajax**:`$....

    jQuery中bind(),live(),delegate

    `delegate()`是介于`bind()`和`live()`之间的一个方法,它允许你在父级元素上绑定事件,而不是在整个文档上。这有助于提高性能,因为事件处理只会在指定的父元素上进行。用法如下: ```javascript $('#container'...

    jquery.mobile.event

    jQuery Mobile通过`.bind()`、`.live()`(已废弃)、`.on()`等方法绑定事件,并提供了`.event.preventDefault()`和`.event.stopPropagation()`来控制事件的行为。例如,阻止链接的默认跳转,可以在`vclick`事件处理...

Global site tag (gtag.js) - Google Analytics