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

摘要：jQuery的.bind()、.live()和.delegate()之间的区别并不是老是那么明显的，然而，若是咱们对全部的不一样之处都有清晰的理解的话，那么这将会有助于咱们编写出更加简洁的代码，以及防止在交互应用中弹出错误。

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

　　基本要素

 

DOM树

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

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

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

　　 

　　所以一个单击操做会触发alert函数的执行。

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

　　在操纵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()的处理函数早已运行了。

 

附: 

 jQuery的事件处理方法介绍 - bind()，live()，delegate()，on()