摘要：方法將事件類(lèi)型和一個(gè)事件處理函數(shù)直接注冊(cè)到了被選中的元素中。方法將與事件處理函數(shù)關(guān)聯(lián)的選擇器和事件信息一起附加到文檔的根級(jí)元素即。通過(guò)將事件信息注冊(cè)到上，這個(gè)事件處理函數(shù)將允許所有冒泡到的事件調(diào)用它例如委托型傳播型事件。

我了解到很多網(wǎng)頁(yè)開(kāi)發(fā)者對(duì)jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關(guān)于它們之間真正的區(qū)別是什么啊，什么時(shí)候該使用它們啊。

在我們深入了解這些方法之前，我們先來(lái)一段常見(jiàn)的的HTML，作為我們編寫(xiě)jquery示例方法使用的樣本。

    
    

        
            
John Resig
            
jQuery Core Lead
            
Boston, United States
        
    
    

.bind()方法將事件類(lèi)型和一個(gè)事件處理函數(shù)直接注冊(cè)到了被選中的DOM元素中。這個(gè)方法被使用得最久,在此期間,它很好的解決了各種跨瀏覽器的問(wèn)題。當(dāng)使用它來(lái)連接事件處理函數(shù)時(shí),它仍然非常簡(jiǎn)潔,但是也存在著一些性能方面的問(wèn)題,將在下面羅列出來(lái)。

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

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

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

優(yōu)點(diǎn):

適用于各種瀏覽器

連接事件處理函數(shù)非常方便快捷

可以使用 .click(), .hover()等簡(jiǎn)寫(xiě)方法來(lái)更方面地連接事件處理函數(shù)

對(duì)于一個(gè)簡(jiǎn)單的ID選擇器,使用.bind() 方法不僅可以很快地連接事件處理函數(shù),而且當(dāng)事件被觸發(fā)時(shí), 事件處理函數(shù)幾乎是馬上就被調(diào)用了

缺點(diǎn):

這樣方法會(huì)將所有的事件處理函數(shù)附加到所有匹配的元素

不可以動(dòng)態(tài)地匹配相同選擇器的元素

當(dāng)操作大量匹配的元素時(shí)會(huì)有性能方面的問(wèn)題

附加操作是在前期完成的,這可能導(dǎo)致頁(yè)面加載時(shí)存在性能問(wèn)題

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

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

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

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

優(yōu)點(diǎn):

所有的事件處理函數(shù)都只會(huì)被注冊(cè)一次，而不是像.bind()那樣進(jìn)行多次注冊(cè)

將.bind()方法升級(jí)到.live()方法非常方便，你僅需要將"bind"替代為"live"就可以了

那些被動(dòng)態(tài)添加到DOM的元素也將被神奇的匹配到，因?yàn)檎鎸?shí)的事件信息是被注冊(cè)到document元素上的

你可以在文檔加載完之前連接事件處理函數(shù)，這樣可以幫助你更好地利用你可能沒(méi)有用的時(shí)間

缺點(diǎn):

這個(gè)方法在Jquery 1.7以后的版本被棄用了，你應(yīng)該在你的代碼里逐步放棄使用它

使用這個(gè)方法時(shí)鏈?zhǔn)讲僮鳑](méi)有得到正確的支持，可能會(huì)出現(xiàn)某些錯(cuò)誤

所做的匹配操作基本上沒(méi)用因?yàn)樗挥糜谠赿ocument元素上注冊(cè)事件處理函數(shù)

使用 event.stopPropogation() 方法將會(huì)沒(méi)用，因?yàn)槭录偸且呀?jīng)被委托到了document元素上

因?yàn)樗械倪x擇器或者事件信息都被附加到document元素上了，所以一旦有一個(gè)事件要調(diào)用某個(gè)事件處理函數(shù)，Jquery會(huì)在一大堆儲(chǔ)存的元數(shù)據(jù)中使用matchesSelector方法來(lái)決定哪一個(gè)事件處理函數(shù)將會(huì)被調(diào)用，如果這個(gè)函數(shù)有的話(huà)。

因?yàn)槟闼B接的事件總是被委托到document上，所如果你的DOM的層級(jí)很深的話(huà)，這會(huì)導(dǎo)致一定的性能問(wèn)題

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

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

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

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

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

優(yōu)點(diǎn):

你可以選擇將選擇器或者事件信息附加到指定的元素。

匹配操作實(shí)際上在前面并沒(méi)有執(zhí)行，而是用來(lái)注冊(cè)到指定的元素。

鏈?zhǔn)讲僮骺梢缘玫秸_的支持

Jquery仍然需要迭代這些選擇器或者事件信息來(lái)匹配元素，不過(guò)因?yàn)槟憧梢赃x擇哪一個(gè)元素作為根元素，所以篩選的量會(huì)大幅減少

因?yàn)檫@項(xiàng)技術(shù)使用了事件委托機(jī)制，它可以匹配到被動(dòng)態(tài)地添加到DOM的元素

你可以在文檔加載完之前連接事件處理函數(shù)

缺點(diǎn):

從.bind()方法不可以直接升級(jí)到.delegate()方法

Jquery仍然需要使用marchesSelector方法在附加到指定根元素的選擇器或者事件信息中篩選決定哪一個(gè)事件處理函數(shù)會(huì)被調(diào)用。然而，附加到指定根元素的元數(shù)據(jù)會(huì)比使用.live()方法的時(shí)候要小得多。

當(dāng)操作大量匹配的元素時(shí)會(huì)有性能方面的問(wèn)題

附加操作是在前期完成的,這可能導(dǎo)致頁(yè)面加載時(shí)存在性能問(wèn)題

你知道嗎，在Jquery 1.7版本中.bind()，.live() 和.delegate()方法只需要使用.on()方法一種方式來(lái)調(diào)用它們。當(dāng)然.unbind()，.die() 和.undelegate()方法也一樣。一下代碼片段是從Jquery 1.7版本的源碼中截取出來(lái)的

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 );
}

考慮到這一點(diǎn)，使用.on()方法看起來(lái)像以下方式一樣...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一種方式來(lái)調(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()方法被具有不同簽名的方法”重載“了，而這些方法實(shí)現(xiàn)了不同的事件綁定的連接方式。.on()方法的出現(xiàn)為API帶來(lái)了很多方面的一致性，并希望讓事情變得不那么混亂。

優(yōu)點(diǎn):

使各種事件綁定方法一致。

因?yàn)樵贘query源碼中.bind()，.live() 和.delegate()方法實(shí)際上是調(diào)用了此方法，因此簡(jiǎn)化了jQuery代碼庫(kù)并刪除了一級(jí)重定向。

這種方式仍然提供了使用.delegate()方法的優(yōu)點(diǎn)，并且仍然提供對(duì).bind()方法的支持，如果你需要的話(huà)。

缺點(diǎn):

給人帶來(lái)了一些疑惑，因?yàn)榉椒ǖ膶?shí)際執(zhí)行方式將根據(jù)你如何調(diào)用方法而改變。

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

使用.bind()方法非常浪費(fèi)性能因?yàn)樗淹粋€(gè)事件處理函數(shù)附加到了每一個(gè)匹配的元素上

你應(yīng)該停止使用.live()方法因?yàn)樗粭売昧送瑫r(shí)也會(huì)帶來(lái)很多問(wèn)題

使用.delegate()方法會(huì)給你帶來(lái)很多好處當(dāng)你需要解決一些性能上的問(wèn)題和對(duì)動(dòng)態(tài)添加的元素作出處理

新的.on()方法其實(shí)就是模擬.bind()，.live() 和.delegate()實(shí)現(xiàn)的語(yǔ)法糖，具體取決于你如何調(diào)用它

新的方向是使用新的.on()方法。先熟悉語(yǔ)法，并開(kāi)始在你的所有的Jquery 1.7版本以上的項(xiàng)目使用它吧！

對(duì)于上面列舉的優(yōu)點(diǎn)或者缺點(diǎn)，你有新的補(bǔ)充嗎？你最近開(kāi)始使用.delegate()方法了嗎？你對(duì)新的.on()方法怎么看呢？把你的想法寫(xiě)到用評(píng)論告訴我吧！謝謝！

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

原文鏈接