Jquery中.bind()、.live()、.delegate()和.on()之間的區別實例分享-js教程-PHP中文網

本文主要和大家分享Jquery中.bind()、.live()、.delegate()和.on()之間的區別，在我們日常開發中經常會使用到.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標籤。這種方式並不好。這樣做的話，它不僅在所有匹配的元素中隱含地迭代附加事件處理函數，而且這些操作非常浪費（多餘），因為這些相同的事件處理函數是被一遍一遍的重複的添加到所有匹配的標籤上。

優點:

適用於各種瀏覽器
#連線事件處理函數非常方便快速
#可以使用.click() , .hover()等簡寫方法來更方面地連接事件處理函數
對於一個簡單的ID選擇器,使用.bind() 方法不僅可以很快地連接事件處理函數,而且當事件被觸發時, 事件處理函數幾乎是馬上就被呼叫了

缺點:

這樣方法會將所有的事件處理函數附加到所有符合的元素
#不可以動態地符合相同選擇器的元素
#當操作大量匹配的元素時會有性能方面的問題
附加操作是在前期完成的,這可能導致頁面加載時存在性能問題

使用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元素一次，而不是很多次。這樣不僅更快，而且還減少了效能的浪費。然而，使用這個方法也會帶來很多問題，以下將一一列出。

優點:

所有的事件處理函數都只會被註冊一次，而不是像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() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

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

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

登入後複製

.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版本的源码中截取出来的

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带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点: