详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

Posted 2020-09-05

转载自：http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/

我见过很多开发者很困惑关于jQuery中的.bind(), .live(), .delegate() 和 .on() 的使用以及它们的不同。

如果你没有耐心或者只想看到总结的话，请直接跳转到结尾。

 

在我们深入了解这些方法之前，先准备好html代码。

 

[javascript] view plain copy

 

 

1. <pre>  
2. <ul id="members" data-role="listview" data-filter="true"><!-- ... more list items ... -->  
3.     <li>  
4. <h3>John Resig</h3>  
5. <a href="detail.html?id=10">  
6. <strong>jQuery Core Lead</strong>  
7.    
8. Boston, United States  
9. </a></li>  
10. <!-- ... more list items ... --></ul>  
11. </pre>  

 

.bind()

.bind()注册的事件直接指向相对应的DOM元素。这个方法从jQuery 1.0都有了，并且这个方法能够很酷的处理跨浏览器的事件绑定问题。对，这个方法用起来很方便。但是问题来了，就是各种各样的性能问题，如下：

 

[javascript] view plain copy

 

 

1. Code example:  
2.   
3. /* The .bind() method attaches the event handler directly to the DOM 
4. element in question ( "#members li a" ). The .click() method is 
5. just a shorthand way to write the .bind() method. */  
6.    
7. $( "#members li a" ).bind( "click", function( e ) {} );  
8. $( "#members li a" ).click( function( e ) {} );  

优点

• 跨浏览器
• 非常方便和快捷地绑定事件
• 简单的实现方法（.click() .hover() ,etc…）让它用起来很方便
• 对于简单的ID选择器来说，使用.bind()不仅方便，而且当触发这个事件的时候能够即时响应。

缺点

• 这个方法会附加相同的处理程序到每一个匹配到的元素上
• 对于动态添加的属于匹配到的元素，不会被触发事件的
• 性能问题，对于处理大量的匹配元素的时候
• 如果在页面加载前要处理添加事件的话，会影响加载效率的

.live()

.live()方法使用的是事件委托的概念来执行所谓的“神奇方法”。调用.live()方法看起来和调用.bind()方法一样，非常方便。但是他们下面的实现原理却不同。.live()方法附加事件处理程序到根一级的document上来关联匹配到的元素和事件信息。通过注册事件处理程序到document上来允许事件处理程序通过冒泡来绑定事件和匹配的元素（译者：注意，事件其实在document上的）。一旦事件冒泡到document的时候，jQuery判断选择器和事件处理程序是否有匹配到的，如果有的话，则调用对应的事件处理程序。很明显的会在用户使用的过程中有性能问题，但是在绑定注册的时候是非常的迅速的。

[javascript] view plain copy

 

 

1. Code example:  
2.   
3. /* The .live() method attaches the event handler to the root level 
4. document along with the associated selector and event information 
5. ( "#members li a" & "click" ) */  
6.    
7. $( "#members li a" ).live( "click", function( e ) {} );  

优点

• 相对于.bind()的循环注册很多次事件处理程序来说，.live()只注册一次事件处理程序
• 从.bind()更新到.live()的方法对程序更改很少，只需要替换“bind”为”live”
• 对于动态添加的属于匹配到的元素，也能够“神奇”的执行处理程序
• 在document元素没有全部加载完之前都能够几乎不花时间地绑定并触发事件

缺点

• 此方法在jQuery1.7的时候已经废除，你应该逐步从你的代码中替换掉该方法
• 链接不能够正常的支持这个方法
• 这个方法被抛弃是因为它只能够绑定事件处理程序到document上
• event.stopPropagation()不再有效了，因为事件已经委托到了document上了
• 由于所有的选择器和事件信息都是附加到了document上的，所以一个确定的事件要触发，必须通过大量的存储信息来匹配到
• 由于事件都是委托到了document上的，所以如果DOM太深的话，会影响到性能的

.delegate()

.delegate()方法的行为有点类似.live()。但是不是把选择器和事件的信息附加到了document上，而是可以自行选择它要附加的DOM元素，这个技术可以让事件的委托正常工作。 如果你跳过了.live()的介绍和分析，请先跳回去读一下，接着我才能向你表述清楚下面的逻辑

 

[javascript] view plain copy

 

 

1. Code example:  
2.   
3. /*.delegate()的处理方法类似.live()，但是不是将事件处理程序附加到了document上，而是可以选择它在哪里（"#members"）。选择器和事件信息（"li a" 和 "click"）将会附加到“#members”元素上。 */  
4. $( "#members" ).delegate( "li a", "click", function( e ) {} );  

 

.delegate()方法是非常强大的。上面的代码会将事件处理程序以及选择器和事件信息附加到”#members”上。这个当然要比.live()将这些内容附加到document上有效的多了。另外有很多其他的一年问题也通过.delegate()这个方法解决了。请参阅下列大纲的详细列表。

优点

• 可以自由选择附加的选择器和事件信息的位置
• 链接也可以有效的支持了
• jQuery仍然需要循环访问选择器和事件数据来确定匹配，但是因为能够选择这些信息附加的位置，所以通过匹配的量小很多了
• 由于这种技术使用了事件委托，所以它能很好的动态处理添加到DOM元素
• 如果你委托事件到了document上，你也可以在document全部准备完之前绑定和调用

缺点

• 方法从.bind()更改到.delegate()比较麻烦
• 如果把选择器和事件数据附加到了document上，仍然需要很多的匹配信息，但是相对于.live()的存储量要小很多了

.on()

你知道jQuery中的.bind() .live 和 .delegate()方法都是通过同一个新方法实现的–.on() （在jQuery1.7后），下面的代码片段来自jQuery 1.7.1 codebase in GitHub…

 

[javascript] view plain copy

 

 

1. Code example:  
2.   
3. // ... more code ...  
4.    
5. bind: function( types, data, fn ) {  
6. return this.on( types, null, data, fn );  
7. },  
8. unbind: function( types, fn ) {  
9. return this.off( types, null, fn );  
10. },  
11.    
12. live: function( types, data, fn ) {  
13. jQuery( this.context ).on( types, this.selector, data, fn );  
14. return this;  
15. },  
16. die: function( types, fn ) {  
17. jQuery( this.context ).off( types, this.selector || "**", fn );  
18. return this;  
19. },  
20.    
21. delegate: function( selector, types, data, fn ) {  
22. return this.on( types, selector, data, fn );  
23. },  
24. undelegate: function( selector, types, fn ) {  
25. return arguments.length == 1 ?  
26. this.off( selector, "**" ) :  
27. this.off( types, selector, fn );  
28. },  
29.    
30. // ... more code ...  

这就意味着这个新方法的用法可以像下面这样

[javascript] view plain copy

 

 

1. Code example:  
2.   
3. /* The jQuery .bind(), .live(), and .delegate() methods are just one 
4. line pass throughs to the new jQuery 1.7 .on() method */  
5.    
6. // Bind  
7. $( "#members li a" ).on( "click", function( e ) {} );  
8. $( "#members li a" ).bind( "click", function( e ) {} );  
9.    
10. // Live  
11. $( document ).on( "click", "#members li a", function( e ) {} );  
12. $( "#members li a" ).live( "click", function( e ) {} );  
13.    
14. // Delegate  
15. $( "#members" ).on( "click", "li a", function( e ) {} );  
16. $( "#members" ).delegate( "li a", "click", function( e ) {} );  

你会注意到，具体取决于我如何调用.on()方法来更改它的执行过程。你可以考虑“重载”.on()方法来具有不同的效果。这个方法给API带来了很多的一致性，并希望减少那些方法的混淆。

优点

• 为各种事件绑定方法带来了统一性
• 简化了jQuery代码库，并删除一个界别的重定向，因为通过调用这个方法实现了 .bind() .live() 和 .delegate()
• 仍然提供了好用的.delegate()方法，但是也仍然对.bind()方法提供了支持

缺点

• 因为调用这个方法的各个形式，会带来一些混乱

总结

如果你已经对各种类型的事件绑定方法混淆的神志不清的话也别担心，这是因为历史遗留问题和API在随着时间的推移导致的。有些人认为这些方法作为魔法方法，但是一旦你发现他们如何工作的将会更好的利于你的项目。

从这篇文章中应该记住的要点：

• 使用.bind()方法是很浪费资源的，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序
• 建议停止使用.live()方法，因为它已经被弃用了，由于他有很多的问题
• .delegate()方法“很划算”用来处理性能和响应动态添加元素的时候
• 新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能
• 建议使用.on()方法，如果你的项目使用了1.7+的jQuery的话