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

?

?

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

?

?

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

?

現(xiàn)在我們?cè)賮碚f明 .bind() 、 .live() 和 .delegate() 的不同之處 ：

.bind()

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

?

?

.live()?

?

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

?

?

.delegate()?

?

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

?

1、 這句話是否正確？

? ?不完全正確，

?

如上面的代碼，后者實(shí)際上要快過前者，因?yàn)榍罢呤紫纫獟呙枵麄€(gè)的文檔查找所有的 $(‘a(chǎn)') 元素，把它們存成 jQuery 對(duì)象。盡管 live 函數(shù)僅需要把 'a' 作為串參數(shù)傳遞以用做之后的判斷，但是 $() 函數(shù)并未 “ 知道 ” 被鏈接的方法將會(huì)是 .live() 。而另一方面， delegate 方法僅需要查找并存儲(chǔ) $(document) 元素。 一種解決的辦法為，使用一種“早委托”的方式，如下：

?

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

?

?

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

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

??二、默認(rèn)把事件綁定到$(document) 元素，如果 DOM 嵌套結(jié)構(gòu)很深，事件冒泡通過大量祖先元素會(huì)導(dǎo)致性能損失；

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

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

?

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

???可以絕對(duì)的肯定。寫一個(gè)樣例，html 代碼為：

? 測(cè)試代碼：

?

其測(cè)試結(jié)果為:?ccc?>?aaa?>?bbb，和預(yù)期相符合