• 相对于.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的话