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

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

基礎(chǔ)

DOM樹

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

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

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

所以一次點(diǎn)擊會(huì)觸發(fā)一個(gè)alert。

然后，這個(gè) click 事件會(huì)從DOM樹向上傳遞，傳播到父元素，然后傳遞給每一個(gè)祖先元素。

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

.bind()

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

.live()

　　jQuery綁定處理函數(shù)到 $(document) 元素，并把 ‘click’ 和 ‘a(chǎn)’ 作為函數(shù)的參數(shù)。有事件冒泡到document節(jié)點(diǎn)的時(shí)候，檢查這個(gè)事件是不是 click 事件，target element能不能匹配 ‘a(chǎn)’ css選擇器，如果兩個(gè)條件都是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 或許會(huì)總結(jié)成 $(‘a(chǎn)’).live() == $(document).delegate(‘a(chǎn)’)，真的是這樣嗎？ 不，不全是。

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

jQuery 的 delegate方法比 live 方法更應(yīng)該成為首選有一個(gè)原因。考慮以下的場景：

速度

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

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

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

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

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

只支持css選擇器

最后，live方法有一個(gè)最大的缺點(diǎn)，只能用css選擇器，用起來很不方便。

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

原作者更新

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

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

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

阻止冒泡

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

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