jQuery為綁定和委托事件提供了.bind()、.live()和.delegate()方法。本文在討論這幾個(gè)方法內(nèi)部實(shí)現(xiàn)的基礎(chǔ)上，展示它們的優(yōu)劣勢(shì)及適用場(chǎng)合。

事件委托

事件委托的事例在現(xiàn)實(shí)當(dāng)中比比皆是。比如，有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞，有兩種辦法：一是三個(gè)人在公司門(mén)口等快遞；二是委托給前臺(tái)MM代為簽收?，F(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會(huì)容忍那么多員工站在門(mén)口就為了等快遞）。前臺(tái)MM收到快遞后，她會(huì)判斷收件人是誰(shuí)，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì)，那就是即使公司里來(lái)了新員工（不管多少），前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。

我們知道，DOM在為頁(yè)面中的每個(gè)元素分派事件時(shí)，相應(yīng)的元素一般都在事件冒泡階段處理事件。在類似 body > div > a 這樣的結(jié)構(gòu)中，如果單擊a元素，click事件會(huì)從a一直冒泡到div和body（即document對(duì)象）。因此，發(fā)生在a上面的單擊事件，div和body元素同樣可以處理。而利用事件傳播（這里是冒泡）這個(gè)機(jī)制，就可以實(shí)現(xiàn)事件委托。具體來(lái)說(shuō)，事件委托就是事件目標(biāo)自身不處理事件，而是把處理任務(wù)委托給其父元素或者祖先元素，甚至根元素（document）。

.bind()
假設(shè)有一個(gè)多行多列的表格，我們想讓用戶單擊每個(gè)單元格都能看到與其中內(nèi)容相關(guān)的更多信息（比如，通過(guò)提示條）。為此，可以為每個(gè)單元格都綁定click事件：

$("info_table td").bind("click", function(){/*顯示更多信息*/});

問(wèn)題是，如果表格中要綁定單擊事件的有10列500行，那么查找和遍歷5000個(gè)單元格會(huì)導(dǎo)致腳本執(zhí)行速度明顯變慢，而保存5000個(gè)td元素和相應(yīng)的事件處理程序也會(huì)占用大量?jī)?nèi)存（類似于讓每個(gè)人親自站在門(mén)口等快遞）。

在前面這個(gè)例子的基礎(chǔ)上，如果我們想實(shí)現(xiàn)一個(gè)簡(jiǎn)單的相冊(cè)應(yīng)用，每頁(yè)只顯示50張照片的縮略圖（50個(gè)單元格），用戶點(diǎn)擊“第x頁(yè)”（或“下一頁(yè)”）鏈接可以通過(guò)Ajax從服務(wù)器動(dòng)態(tài)加載另外50張照片。在這種情況下，似乎使用.bind()方法為50個(gè)單元格綁定事件又可以接受了。

事實(shí)卻不然。使用.bind()方法只會(huì)給第一頁(yè)中的50個(gè)單元格綁定單擊事件，動(dòng)態(tài)加載的后續(xù)頁(yè)面中的單元格都不會(huì)有這個(gè)單擊事件。換句話說(shuō)，.bind()只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件，不能給未來(lái)新增的元素綁定事件（類似于新來(lái)的員工收不到快遞）。

事件委托可以解決上述兩個(gè)問(wèn)題。具體到代碼上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：

$("#info_table td").live("click",function(){/*顯示更多信息*/});

這里的.live()方法會(huì)把click事件綁定到$(document)對(duì)象（但這一點(diǎn)從代碼中體現(xiàn)不出來(lái)，這也是.live()方法飽受詬病的一個(gè)重要原因，稍后再詳細(xì)討論），而且只需要給$(document)綁定一次（不是50次，更不是5000次），然后就能夠處理后續(xù)動(dòng)態(tài)加載的照片單元格的單擊事件。在接收到任何事件時(shí)，$(document)對(duì)象都會(huì)檢查事件類型和事件目標(biāo)，如果是click事件且事件目標(biāo)是td，那么就執(zhí)行委托給它的處理程序。

.live()
到目前為止，一切似乎很完美?？上?，事實(shí)并非如此。因?yàn)?live()方法并不完美，它有如下幾個(gè)主要缺點(diǎn)：

$()函數(shù)會(huì)找到當(dāng)前頁(yè)面中的所有td元素并創(chuàng)建jQuery對(duì)象，但在確認(rèn)事件目標(biāo)時(shí)卻不用這個(gè)td元素集合，而是使用選擇符表達(dá)式與event.target或其祖先元素進(jìn)行比較，因而生成這個(gè)jQuery對(duì)象會(huì)造成不必要的開(kāi)銷；
默認(rèn)把事件綁定到$(document)元素，如果DOM嵌套結(jié)構(gòu)很深，事件冒泡通過(guò)大量祖先元素會(huì)導(dǎo)致性能損失；
只能放在直接選擇的元素后面，不能在連綴的DOM遍歷方法后面使用，即$("#infotable td").live...可以，但$("#infotable").find("td").live...不行；
收集td元素并創(chuàng)建jQuery對(duì)象，但實(shí)際操作的卻是$(document)對(duì)象，令人費(fèi)解。

解決之道

為了避免生成不必要的jQuery對(duì)象，可以使用一種叫做“早委托”的hack，即在$(document).ready()方法外部調(diào)用.live()：

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

為了避免事件冒泡造成的性能損失，jQuery從1.4開(kāi)始支持在使用.live()方法時(shí)配合使用一個(gè)上下文參數(shù)：

$("td",$("#info_table")[0]).live("click",function(){/*顯示更多信息*/});這樣，“受托方”就從默認(rèn)的$(document)變成了$("#infotable")[0]，節(jié)省了冒泡的旅程。不過(guò)，與.live()共同使用的上下文參數(shù)必須是一個(gè)單獨(dú)的DOM元素，所以這里指定上下文對(duì)象時(shí)使用的是$("#infotable")[0]，即使用數(shù)組的索引操作符來(lái)取得的一個(gè)DOM元素。

.delegate()
如前所述，為了突破單一.bind()方法的局限性，實(shí)現(xiàn)事件委托，jQuery 1.3引入了.live()方法。后來(lái)，為解決“事件傳播鏈”過(guò)長(zhǎng)的問(wèn)題，jQuery 1.4又支持為.live()方法指定上下文對(duì)象。而為了解決無(wú)謂生成元素集合的問(wèn)題，jQuery 1.4.2干脆直接引入了一個(gè)新方法.delegate()。

使用.delegate()，前面的例子可以這樣寫(xiě)：

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
使用.delegate()有如下優(yōu)點(diǎn)（或者說(shuō)解決了.live()方法的如下問(wèn)題）：

直接將目標(biāo)元素選擇符（"td"）、事件（"click"）及處理程序與“受拖方”$("#info_table")綁定，不額外收集元素、事件傳播路徑縮短、語(yǔ)義明確；
支持在連綴的DOM遍歷方法后面調(diào)用，即支持$("table").find("#info").delegate...，支持精確控制；
可見(jiàn)，.delegate()方法是一個(gè)相對(duì)完美的解決方案。但在DOM結(jié)構(gòu)簡(jiǎn)單的情況下，也可以使用.live()。

提示：使用事件委托時(shí)，如果注冊(cè)到目標(biāo)元素上的其他事件處理程序使用.stopPropagation()阻止了事件傳播，那么事件委托就會(huì)失效。

結(jié)論
在下列情況下，應(yīng)該使用.live()或.delegate()，而不能使用.bind()：

為DOM中的很多元素綁定相同事件；
為DOM中尚不存在的元素綁定事件；

PS：根據(jù)jQuery 1.7 Beta 1的發(fā)版說(shuō)明，jQuery 1.7為了解決.bind()、.live()和.delegate()并存造成的不一致性問(wèn)題，將會(huì)增加一對(duì)新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector，則為事件委托；否則，就是常規(guī)綁定。新舊API對(duì)應(yīng)如下：

（注：本文基于《jQuery基礎(chǔ)教程（第3版）》相關(guān)章節(jié)內(nèi)容編撰而成，同時(shí)參考了

• The Difference Between jQuery's .bind(), .live(), and .delegate()
• bind() vs live() vs delegate() function
• jQuery API）

最新評(píng)論