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

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

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

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

 

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

 

[javascript]  view plain  copy
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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
 
 在CODE上查看代码片派生到我的代码片
  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的话
 

转载于:https://www.cnblogs.com/lixu880/p/6561486.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
程序员的必经之路! 【限时优惠】 现在下单,还享四重好礼: 1、教学课件免费下载 2、课程案例代码免费下载 3、专属VIP学员群免费答疑 4、下单还送800元编程大礼包 【超实用课程内容】  根据《2019-2020年国开发者调查报告》显示,超83%的开发者都在使用MySQL数据库。使用量大同时,掌握MySQL早已是运维、DBA的必备技能,甚至部分IT开发岗位也要求对数据库使用和原理有深入的了解和掌握。 学习编程,你可能会犹豫选择 C++ 还是 Java;入门数据科学,你可能会纠结于选择 Python 还是 R;但无论如何, MySQL 都是 IT 从业人员不可或缺的技能!   套餐一共包含2门MySQL数据库必学的核心课程(共98课时)   课程1:《MySQL数据库从入门到实战应用》   课程2:《高性能MySQL实战课》   【哪些人适合学习这门课程?】  1)平时只接触了语言基础,并未学习任何数据库知识的人;  2)对MySQL掌握程度薄弱的人,课程可以让你更好发挥MySQL最佳性能; 3)想修炼更好的MySQL内功,工作遇到高并发场景可以游刃有余; 4)被面试官打破沙锅问到底的问题问到怀疑人生的应聘者。 【课程主要讲哪些内容?】 课程一:《MySQL数据库从入门到实战应用》 主要从基础篇,SQL语言篇、MySQL进阶篇三个角度展开讲解,帮助大家更加高效的管理MySQL数据库。 课程二:《高性能MySQL实战课》主要从高可用篇、MySQL8.0新特性篇,性能优化篇,面试篇四个角度展开讲解,帮助大家发挥MySQL的最佳性能的优化方法,掌握如何处理海量业务数据和高并发请求 【你能收获到什么?】  1.基础再提高,针对MySQL核心知识点学透,用对; 2.能力再提高,日常工作的代码换新貌,不怕问题; 3.面试再加分,巴不得面试官打破沙锅问到底,竞争力MAX。 【课程如何观看?】  1、登录CSDN学院 APP 在我的课程进行学习; 2、移动端:CSDN 学院APP(注意不是CSDN APP哦)  本课程为录播课,课程永久有效观看时长 【资料开放】 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化。  下载方式:电脑登录课程观看页面,点击右侧课件,可进行课程资料的打包下载。
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页