Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解

簡介

最近了解到很多網(wǎng)頁開發(fā)者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關(guān)于它們之間真正的區(qū)別是什么啊，什么時候該使用它們啊。下面本文將給大家詳細介紹這四個方法之間的區(qū)別，分別對每個方法都進行了詳細的介紹，話不多說，來一起看看詳細的介紹：

在我們深入了解這些方法之前，我們先來一段常見的的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()方法將事件類型和一個事件處理函數(shù)直接注冊到了被選中的DOM元素中。這個方法被使用得最久,在此期間,它很好的解決了各種跨瀏覽器的問題。當(dāng)使用它來連接事件處理函數(shù)時,它仍然非常簡潔,但是也存在著一些性能方面的問題,將在下面羅列出來。

/* .bind() 方法將事件類型和一個事件處理函數(shù)直接注冊到了被選中的DOM元素中。 
 .click() 方法只是.bind() 方法的簡寫。
*/

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

.bind()方法將會把事件處理函數(shù)連接到所有匹配的a標(biāo)簽。這種方式并不好。這樣做的話，它不僅在所有匹配的元素中隱含地迭代附加事件處理函數(shù)，而且這些操作非常浪費（多余），因為這些相同的事件處理函數(shù)是被一遍一遍的重復(fù)的添加到所有匹配的標(biāo)簽上。

優(yōu)點:

缺點:

使用Live方法

.live()方法使用了事件委托的概念來實施其所謂的“魔法”。你調(diào)用live()方法的方式就像是調(diào)用bind()方法那樣方便。然而在這表面之下， .live()方法與前者的實現(xiàn)方式大不相同。 .live()方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級元素（即document）。通過將事件信息注冊到document上，這個事件處理函數(shù)將允許所有冒泡到document的事件調(diào)用它（例如委托型、傳播型事件）。一旦有一個事件冒泡到document元素上，Jquery會根據(jù)選擇器或者事件的元數(shù)據(jù)來決定哪一個事件處理函數(shù)應(yīng)該被調(diào)用，如果這個事件處理函數(shù)存在的話。這個額外的工作將會在用戶交互時對性能方面造成一定的影響，但是初始化注冊事件的過程相當(dāng)?shù)乜臁?/p>

/* 方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級元素（即document） 
 ( "#members li a" & "click" ) */

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

.bind()這個例子與上面bind()方法的例子對比的話有一個優(yōu)點在于它僅僅把事件處理函數(shù)附加到document元素一次，而不是很多次。這樣不僅更快，而且還減少了性能的浪費。然而，使用這個方法也會帶來很多問題，下面將一一列出。

優(yōu)點:

缺點:

使用Delegate方法

.delegate()方法與live()方式實現(xiàn)方式相類似，它不是將選擇器或者事件信息附加到document，而是讓你指定附加的元素。就像是live()方法一樣，這個方法使用事件委托來正確地工作。

如果你跳過了前面關(guān)于 .live() 方法的介紹，你可能要回去重新看看它，因為這里涉及到之前我所闡述的一些內(nèi)部邏輯

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

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

.delegate()方法十分強大。在上面這個例子中，與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息將會被附加到( #members" )這個元素上。這樣做比使用live()高效多了，因為live()方法總是將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息附加到document元素上。另外，使用.delegate()方法解決許多其他問題。請參閱下方列出的詳細信息。

優(yōu)點:

缺點:

使用On方法

你知道嗎，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一種方式來調(diào)用它們。當(dāng)然.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()`方法一種方式來調(diào)用它們 */

// 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()方法決定了它如何調(diào)用其他方法。你可以認(rèn)為.on()方法被具有不同簽名的方法”重載“了，而這些方法實現(xiàn)了不同的事件綁定的連接方式。 .on()方法的出現(xiàn)為API帶來了很多方面的一致性，并希望讓事情變得不那么混亂。

優(yōu)點:

缺點:

總結(jié)

如果你對不同的綁定事件方法有所迷惑，那么不要擔(dān)心，因為API發(fā)展了一段時間了，有很多前人的經(jīng)驗可以借鑒。也有很多人將這些方法視為魔法，不過一旦你了解了他們工作背后的原理，將幫助您了解如何更好地處理項目。
以下是這篇文章的精華所在...

對于上面列舉的優(yōu)點或者缺點，你有新的補充嗎？你最近開始使用delegate()方法了嗎？你對新的.on()方法怎么看呢？把你的想法寫到用評論告訴我吧！謝謝！

第一次翻譯，文章中可能會出現(xiàn)一些不通順的地方，希望得到大家的理解，畢竟我還是個學(xué)生啊！

好了，大概就這樣，

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com