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

末蓝、 2021-10-09 04:02 263阅读 0赞

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

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

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>ul</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"members"</code> 
      <code>data-role</code> 
      <code>=</code> 
      <code>"listview"</code> 
      <code>data-filter</code> 
      <code>=</code> 
      <code>"true"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;!-- ... 其他li ... --&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>a</code> 
      <code>href</code> 
      <code>=</code> 
      <code>"detail.html?id=10"</code> 
      <code>rel</code> 
      <code>=</code> 
      <code>"external nofollow"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>h3</code> 
      <code>&gt;John Resig&lt;/</code> 
      <code>h3</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>p</code> 
      <code>&gt;&lt;</code> 
      <code>strong</code> 
      <code>&gt;jQuery Core Lead&lt;/</code> 
      <code>strong</code> 
      <code>&gt;&lt;/</code> 
      <code>p</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>p</code> 
      <code>&gt;Boston, United States&lt;/</code> 
      <code>p</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>a</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>li</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;!-- ... 其他li ... --&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>ul</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**使用Bind方法**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>.click() 方法只是.bind() 方法的简写。</code> 
     </div> 
     <div> 
      <code>*/</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).bind( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} ); </code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).click( </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

优点:

*  适用于各种浏览器
 *  连接事件处理函数非常方便快捷
 *  可以使用`.click()` ,  `.hover()`等简写方法来更方面地连接事件处理函数
 *  对于一个简单的ID选择器,使用`.bind()`方法不仅可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了

缺点:

*  这样方法会将所有的事件处理函数附加到所有匹配的元素
 *  不可以动态地匹配相同选择器的元素
 *  当操作大量匹配的元素时会有性能方面的问题
 *  附加操作是在前期完成的,这可能导致页面加载时存在性能问题

**使用Live方法 （jquery1.9后弃用了）**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>( "#members li a" &amp; "click" ) */</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).live( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

优点:

*  所有的事件处理函数都只会被注册一次，而不是像`bind()`那样进行多次注册
 *  将`bind()`方法升级到`live()`方法非常方便，你仅需要将"bind"替代为"live"就可以了
 *  那些被动态添加到DOM的元素也将被神奇的匹配到，因为真实的事件信息是被注册到document元素上的
 *  你可以在文档加载完之前连接事件处理函数，这样可以帮助你更好地利用你可能没有用的时间

缺点:

*  这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它
 *  使用这个方法时链式操作没有得到正确的支持，可能会出现某些错误
 *  所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
 *  使用 `event.stopPropogation()`方法将会没用，因为事件总是已经被委托到了document元素上
 *  因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
 *  因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题

**使用Delegate方法**

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

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/* .delegate() 方法会将选择器和事件信息 ( "li a" &amp; "click" ) 附加到你指定的元素上 ( "#members" )。</code> 
     </div> 
     <div> 
      <code>*/</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members"</code> 
      <code>).delegate( </code> 
      <code>"li a"</code> 
      <code>, </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

优点:

*  你可以选择将选择器或者事件信息附加到指定的元素。
 *  匹配操作实际上在前面并没有执行，而是用来注册到指定的元素。
 *  链式操作可以得到正确的支持
 *  Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过因为你可以选择哪一个元素作为根元素，所以筛选的量会大幅减少
 *  因为这项技术使用了事件委托机制，它可以匹配到被动态地添加到DOM的元素
 *  你可以在文档加载完之前连接事件处理函数

缺点:

*  从`.bind()`方法不可以直接升级到`.delegate()`方法
 *  Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而，附加到指定根元素的元数据会比使用`live()`方法的时候要小得多。
 *  当操作大量匹配的元素时会有性能方面的问题
 *  附加操作是在前期完成的,这可能导致页面加载时存在性能问题

**使用On方法**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>bind: </code> 
      <code>function</code> 
      <code>( types, data, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.on( types, </code> 
      <code>null</code> 
      <code>, data, fn );</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
     <div> 
      <code>unbind: </code> 
      <code>function</code> 
      <code>( types, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.off( types, </code> 
      <code>null</code> 
      <code>, fn );</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>live: </code> 
      <code>function</code> 
      <code>( types, data, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>jQuery( </code> 
      <code>this</code> 
      <code>.context ).on( types, </code> 
      <code>this</code> 
      <code>.selector, data, fn );</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
     <div> 
      <code>die: </code> 
      <code>function</code> 
      <code>( types, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>jQuery( </code> 
      <code>this</code> 
      <code>.context ).off( types, </code> 
      <code>this</code> 
      <code>.selector || </code> 
      <code>"**"</code> 
      <code>, fn );</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>delegate: </code> 
      <code>function</code> 
      <code>( selector, types, data, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.on( types, selector, data, fn );</code> 
     </div> 
     <div> 
      <code>},</code> 
     </div> 
     <div> 
      <code>undelegate: </code> 
      <code>function</code> 
      <code>( selector, types, fn ) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>return</code> 
      <code>arguments.length == 1 ? </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.off( selector, </code> 
      <code>"**"</code> 
      <code>) : </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.off( types, selector, fn );</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// Bind</code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).on( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} ); </code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).bind( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// Live</code> 
     </div> 
     <div> 
      <code>$( document ).on( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>"#members li a"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} ); </code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members li a"</code> 
      <code>).live( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>// Delegate</code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members"</code> 
      <code>).on( </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>"li a"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} ); </code> 
     </div> 
     <div> 
      <code>$( </code> 
      <code>"#members"</code> 
      <code>).delegate( </code> 
      <code>"li a"</code> 
      <code>, </code> 
      <code>"click"</code> 
      <code>, </code> 
      <code>function</code> 
      <code>( e ) {} );</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

优点:

*  使各种事件绑定方法一致。
 *  因为在Jquery源码中`.bind()` ， `.live()`和`.delegate()`方法实际上是调用了此方法，因此简化了jQuery代码库并删除了一级重定向。
 *  这种方式仍然提供了使用`.delegate()`方法的优点，并且仍然提供对`.bind()`方法的支持，如果你需要的话。

缺点:

*  给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变。

**总结**

*  使用`.bind()`方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上
 *  你应该停止使用`.live()`方法因为它被弃用了同时也会带来很多问题
 *  使用`.delegate()`方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
 *  新的`.on()`方法其实就是模拟`.bind()` ， `.live()`和`.delegate()`实现的语法糖，具体取决于你如何调用它
 *  新的方向是使用新的`.on()`方法。先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！

[Link 1]: http://www.jb51.net/article/120018.htm#