摘要:jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误。

  基本要素

  DOM树

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

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

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

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

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

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

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

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

  .bind()

  这是最简单的绑定方法了。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()的处理函数早已运行了。

来源: 译言网  原文链接

jQuery的.bind()、.live()和.delegate()之间区别的更多相关文章

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

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

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

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  3. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  4. Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点,建议使用on()

    jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...

  5. jQuery 请指出'.bind()','.live()'和'.delegate()'的区别

    http://kb.cnblogs.com/page/94469/网上好多类似的 简言之bind可以绑定页面上已有的,live和delegate可以绑定到还未存在于页面中的元素之上.delegate又 ...

  6. jQuery的prop和attr方法之间区别

    JQuery.attr(): Get the value of an attribute for the first element in the set of matched elements. J ...

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

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

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

    参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的 ...

  9. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

随机推荐

  1. ArcGIS Server开发教程系列(3)切片

    切片工作,我们可以一级一级的切,也可以,所有的一块切,Recreate All Tiles这项是说,在没有进行任何的切片工作时,可以选用这项:Recreate Empty Tiles这项是说,如果之前 ...

  2. Trie tree实践

    1.Trie树 Trie树即字典树或前缀树, 2.实践 代码实践如下: package cn.edu.buaa.trie; import java.util.HashSet; /** * @autho ...

  3. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  4. postgresql是如何处理死连接(转)

    在数据库postgresql中,一个客户端到服务器连接实际上是一个tcp socket连接,tcp连接是虚连接,一方非正常退出(如断电),另一方会继续维持这个连接.   举个例子,一个客户端电脑正常连 ...

  5. JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。

      JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力..   小森执行一 ...

  6. codevs1204 寻找子串位置

    题目描述 Description 给出字符串a和字符串b,保证b是a的一个子串,请你输出b在a中第一次出现的位置. 输入描述 Input Description 仅一行包含两个字符串a和b 输出描述  ...

  7. 浅谈JSON

    JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格式,为什么没有 ...

  8. ReactiveCocoa源码拆分解析(六)

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...

  9. PHP Strom 配置less 并设置编译后在远程开发模式下自动上传css文件

    ctrl+alt+s ->File Watchers->add-> 其中Argument中的-x代表最后编译过后的css文件为压缩过的 此时就可以用了,但是编译过后less可以自动上 ...

  10. 巧用dimens适配多个分辨率

      让应用自动适配多个分辨率的屏幕,是每个android程序员的基本功,就好像前端工程师熟练编写CSS Hack一样.适配工作中一个重要的工作就是对页面的调整. 对于页面的适配,有很多的方法和技巧.比 ...