首先，可視化一個 HMTL 文檔的 DOM 樹是很有幫助的。一個簡單的 HTML 頁面看起來就像是這個樣子：

?

?

事件冒泡 ( 又稱事件傳播 ) ： 當我們點擊一個鏈接時，其觸發(fā)了鏈接元素的單擊事件，該事件則引發(fā)任何我們已綁定到該元素的單擊事件上的函數(shù)的執(zhí)行。 利用事件傳播（這里是冒泡）這個機制，就可以實現(xiàn)事件委托。具體來說，事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素（document ） 。

?

?

一個單擊操作會觸發(fā) alert 函數(shù)的執(zhí)行。 click 事件接著會向樹的根方向傳播，廣播到父元素，然后接著是每個祖先元素，只要是它的某個后代元素上的單擊事件被觸發(fā)，事件就會傳給它 ，在操縱 DOM 的語境中， document 是根節(jié)點。

?

現(xiàn)在我們再來說明 .bind() 、 .live() 和 .delegate() 的不同之處 ：

.bind()

這是最簡單的綁定方法了。 JQuery 掃描文檔找出所有的 $(' a') 元素，并把 alert 函數(shù)綁定到每個元素的 click 事件上。 注：其隱含意思，.bind() 只能給調(diào)用它的時候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件 。如果是Ajax 過來的元素則無能為力，但是其勝在效率高

?

?

.live()?

?

JQuery 把 alert 函數(shù)綁定到 $(document) 元素上，并使用 'click' 和 'a' 作為參數(shù)。任何時候只要有事件冒泡到 document 節(jié)點上，它就查看該事件是否是一個 click 事件，以及該事件的目標元素與 'a' 這一 CSS 選擇器是否匹配，如果都是的話，則執(zhí)行函數(shù)。 jQuery 從 1.4 開始支持在使用 .live() 方法時配合使用一個上下文參數(shù)：

?

?

.delegate()?

?

JQuery 掃描文檔查找 $('#container') ，并使用 click 事件和 'a' 這一 CSS 選擇器作為參數(shù)把 alert 函數(shù)綁定到 $('#container') 上。任何時候只要有事件冒泡到 $('#container') 上，它就查看該事件是否是 click 事件，以及該事件的目標元素是否與 CSS 選擇器相匹配。如果兩種檢查的結果都為真的話，它就執(zhí)行函數(shù)。 （注：如果監(jiān)聽父控件被移除，其響應事件也會失效）可見，.delegate()方法是一個相對完美的解決方案。但在DOM結構簡單的情況下，也可以使用.live()。

?

1、 這句話是否正確？

? ?不完全正確，

?

如上面的代碼，后者實際上要快過前者，因為前者首先要掃描整個的文檔查找所有的 $(‘a(chǎn)') 元素，把它們存成 jQuery 對象。盡管 live 函數(shù)僅需要把 'a' 作為串參數(shù)傳遞以用做之后的判斷，但是 $() 函數(shù)并未 “ 知道 ” 被鏈接的方法將會是 .live() 。而另一方面， delegate 方法僅需要查找并存儲 $(document) 元素。 一種解決的辦法為，使用一種“早委托”的方式，如下：

?

在此，(function($){ … })(jQuery) 是一個“立即執(zhí)行的匿名函數(shù)”，構成了一個閉包，可以防止命名沖突。在匿名函數(shù)內(nèi)部， $ 參數(shù)引用 jQuery 對象。這個匿名函數(shù)不會等到 DOM 就緒就會執(zhí)行。 注意，使用這個hack 時，腳本必須是在頁面的 head 元素中執(zhí)行的 ，意味著在 $(document).reday()之外執(zhí)行 。之所以選擇這個時機，因為這時候剛好document 元素可用，而整個 DOM 還遠未生成；如果把腳本放在結束的 body 標簽前面，就沒有意義了，因為那時候 DOM 已經(jīng)完全可用了。

?

?

2、.live() 相比 .delegate() 缺點有哪些？

??一、$() 函數(shù)會找到當前頁面中選擇器匹配元素并創(chuàng)建 jQuery 對象，但在確認事件目標時卻不用這個元素集合，而是使用選擇符表達式與 event.target 或其祖先元素進行比較，因而生成這個 jQuery 對象會造成不必要的開銷；

??二、默認把事件綁定到$(document) 元素，如果 DOM 嵌套結構很深，事件冒泡通過大量祖先元素會導致性能損失；

??三、只能放在直接選擇的元素后面，不能在連綴的DOM 遍歷方法后面使用，即 $( “ #infotable?td ” ).live …可以，但 $(“#infotable ” ).find( “ td ” ).live …不行；

??四、收集選擇器匹配元素并創(chuàng)建jQuery 對象，但實際操作的卻是 $(document) 對象，令人費解。

?

3、.live() 真的綁定在 document 上面嗎？

???可以絕對的肯定。寫一個樣例，html 代碼為：

? 測試代碼：

?

其測試結果為:?ccc?>?aaa?>?bbb，和預期相符合