jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > Jquery中.bind()、.live()、.delegate()和.on()区别

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

作者：could

在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on()，有些同学会对这四者存在一些疑虑，所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料，需要的朋友可以参考借鉴。

简介

最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊，什么时候该使用它们啊。下面本文将给大家详细介绍这四个方法之间的区别，分别对每个方法都进行了详细的介绍，话不多说，来一起看看详细的介绍：

在我们深入了解这些方法之前，我们先来一段常见的的HTML，作为我们编写jquery示例方法使用的样本。

<ul id="members" data-role="listview" data-filter="true">
 <!-- ... 其他li ... -->
 <li>
 <a href="detail.html?id=10" rel="external nofollow" >
  <h3>John Resig</h3>
  <p><strong>jQuery Core Lead</strong></p>
  <p>Boston, United States</p>
 </a>
 </li>
 <!-- ... 其他li ... -->
</ul>

使用Bind方法

.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。这个方法被使用得最久,在此期间,它很好的解决了各种跨浏览器的问题。当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题,将在下面罗列出来。

/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
 .click() 方法只是.bind() 方法的简写。
*/

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

.bind()方法将会把事件处理函数连接到所有匹配的a标签。这种方式并不好。这样做的话，它不仅在所有匹配的元素中隐含地迭代附加事件处理函数，而且这些操作非常浪费（多余），因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。

优点:

缺点:

使用Live方法

.live()方法使用了事件委托的概念来实施其所谓的“魔法”。你调用live()方法的方式就像是调用bind()方法那样方便。然而在这表面之下， .live()方法与前者的实现方式大不相同。 .live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） 
 ( "#members li a" & "click" ) */

$( "#members li a" ).live( "click", function( e ) {} );

.bind()这个例子与上面bind()方法的例子对比的话有一个优点在于它仅仅把事件处理函数附加到document元素一次，而不是很多次。这样不仅更快，而且还减少了性能的浪费。然而，使用这个方法也会带来很多问题，下面将一一列出。

优点:

缺点:

使用Delegate方法

.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。就像是live()方法一样，这个方法使用事件委托来正确地工作。

如果你跳过了前面关于 .live() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

$( "#members" ).delegate( "li a", "click", function( e ) {} );

.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外，使用.delegate()方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

缺点:

使用On方法

你知道吗，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截取出来的

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点，使用.on()方法看起来像以下方式一样...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

你可能注意到了，我如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。 .on()方法的出现为API带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点:

缺点:

总结

如果你对不同的绑定事件方法有所迷惑，那么不要担心，因为API发展了一段时间了，有很多前人的经验可以借鉴。也有很多人将这些方法视为魔法，不过一旦你了解了他们工作背后的原理，将帮助您了解如何更好地处理项目。
以下是这篇文章的精华所在...

对于上面列举的优点或者缺点，你有新的补充吗？你最近开始使用delegate()方法了吗？你对新的.on()方法怎么看呢？把你的想法写到用评论告诉我吧！谢谢！

第一次翻译，文章中可能会出现一些不通顺的地方，希望得到大家的理解，毕竟我还是个学生啊！

好了，大概就这样，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持

原文链接

您可能感兴趣的文章:
阅读全文