翻譯原文：http://www./blog/the-difference-between-jquerys-bind-live-and-delegate/

.bind(), .live(), 和 .delegate()之間的區(qū)別并不明顯,。但是理解它們的不同之處有助于寫出更簡潔的代碼,，并防止我們的交互程序中出現(xiàn)沒有預(yù)料到的bug。

基礎(chǔ)

DOM樹

首先，圖形化的HTML文檔能幫助我們更好的理解,。一個簡單的HTML頁面看起來應(yīng)該像這樣

事件冒泡（也稱作事件傳遞）（Event bubbling aka event propagation）

點擊一個鏈接,，觸發(fā)綁定在鏈接元素上的 click 事件，進(jìn)而觸發(fā)綁定到這個元素的click事件的函數(shù),。

所以一次點擊會觸發(fā)一個alert,。

然后，這個 click 事件會從DOM樹向上傳遞,，傳播到父元素,，然后傳遞給每一個祖先元素。

在DOM樹中,， document 是根節(jié)點,。
現(xiàn)在我們能容易的解釋.bind(), .live(), 和 .delegate()之間的差別了

.bind()

這是最直接的綁定方法。jQuery 掃描文檔找到所有 $(‘a(chǎn)’) 元素,，然后給每一個找到的元素的 click 事件綁定處理函數(shù),。

.live()

　　jQuery綁定處理函數(shù)到 $(document) 元素，并把 ‘click’ 和 ‘a(chǎn)’ 作為函數(shù)的參數(shù),。有事件冒泡到document節(jié)點的時候,，檢查這個事件是不是 click 事件，target element能不能匹配 ‘a(chǎn)’ css選擇器,，如果兩個條件都是true,，處理函數(shù)執(zhí)行。

live方法也可以綁定到指定的元素（或者說“上下文(context)”）而不用綁定到document,，比如：

.delegate()

jQuery掃描文檔找到 $(‘#container’),，綁定處理函數(shù)到他的 click 事件，’a’ css選擇器作為函數(shù)的參數(shù),。當(dāng)有事件冒泡到 $(‘#container’),，檢查事件是不是 click，并檢查target element是不是匹配css選擇器,，如果兩者都符合,，執(zhí)行函數(shù)。

注意這次和 .live() 方法很相似,，除了把事件綁定到特定元素與跟元素的區(qū)別,。精明的JS’er 或許會總結(jié)成 $(‘a(chǎn)’).live() == $(document).delegate(‘a(chǎn)’)，真的是這樣嗎,？ 不,，不全是。

為什么 .delegate() 比 .live() 好

jQuery 的 delegate方法比 live 方法更應(yīng)該成為首選有一個原因,?？紤]以下的場景：

速度

上面第二個執(zhí)行比第一個快,，因為第一個會遍歷整個文檔查找 $(‘a(chǎn)’) 元素，并保存為jQuery對象,，但是live方法只需要傳一個字符串參數(shù)’a'而已,，$() 方法并不知道我們會用鏈?zhǔn)奖磉_(dá)式在后面用上.live()。

delegate 方法就只需要找到并存貯 $(document)元素就夠了,。

有一種hack是在 $(document).ready()之外調(diào)用live方法,，這樣就會立即執(zhí)行。這時候DOM還沒有填充,，也就不會查找元素或創(chuàng)建jQuery對象,。

靈活性和鏈?zhǔn)秸Z法

這方面live方法依然令人費解。想一下,，它鏈在$(‘a(chǎn)’)對象,，但實際上是在$(document)對象起作用。因為這個原因,，在鏈?zhǔn)奖磉_(dá)式中使用live讓人很不安,，我覺得live方法變成一個全局的jQuery方法 $.live(‘a(chǎn)’,…) 會更有意義。

只支持css選擇器

最后,，live方法有一個最大的缺點,，只能用css選擇器，用起來很不方便,。

有關(guān)css選擇器的缺點,，參看 Exploring jQuery .live() and .die(),。

原作者更新

為什么使用 .live() 或 .delegate() 而不用 .bind()

最后,，bind 方法看起來更清晰，更直接,，是嗎,？但是這里有兩個原因我們推薦 delegate 或 live:

• 綁定事件處理函數(shù)到還不存在DOM中的元素。 bind 方法直接綁定函數(shù)到每個單獨的元素,，不能綁定到還沒有添加到頁面里的元素,，如果你寫了$(‘a(chǎn)’).bind(…)，然后用ajax給頁面增加了新的鏈接,，新添加的鏈接不會綁定事件,。live 或 delegate 或者其它綁定到祖先元素的事件，讓現(xiàn)在有的元素,，或者以后增的元素都可以使用,。
• 綁定處理函數(shù)到一個元素或者少數(shù)幾個元素，監(jiān)聽后代元素,，而不是綁定100個相同的處理函數(shù)到單獨的元素,。這樣更有性能優(yōu)勢,。

阻止冒泡

最后注意一下事件冒泡。通常我們能用這樣的方法阻止其他處理函數(shù)：

但是在這里,，用 live 或 delegate 方法綁定的事件會一直傳遞到事件真正綁定的地方才會執(zhí)行,。這時其他的函數(shù)已經(jīng)執(zhí)行過了。