jquery優化 事件委託

隨著dom結構的複雜化和ajax等動態指令碼技術的運用，事件委託自然浮出了水面。jquery為繫結和委託事件提供了.bind()、.live()和.delegate()方法。本文在討論這幾個方法內部實現的基礎上，展示它們的優劣勢及適用場合。

事件委託的事例在現實當中比比皆是。比如，有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委託給前台mm代為簽收。現實當中，我們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前台mm收到快遞後，她會判斷收件人是誰，然後按照收件人的要求簽收，甚至代為付款。這種方案還有乙個優勢，那就是即使公司裡來了新員工（不管多少），前台mm也會在收到寄給新員工的快遞後核實並代為簽收。

我們知道，dom在為頁面中的每個元素分派事件時，相應的元素一般都在事件冒泡階段處理事件。在類似 body > div > a 這樣的結構中，如果單擊a元素，click事件會從a一直冒泡到div和body（即document物件）。因此，發生在a上面的單擊事件，div和body元素同樣可以處理。而利用事件傳播（這裡是冒泡）這個機制，就可以實現事件委託。具體來說，事件委託就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根元素（document）。

假設有乙個多行多列的**，我們想讓使用者單擊每個單元格都能看到與其中內容相關的更多資訊（比如，通過提示條）。為此，可以為每個單元格都繫結click事件：

$

("info_table td"
).bind
("click"
,function
());

事實卻不然。使用.bind()方法只會給第一頁中的50個單元格繫結單擊事件，動態載入的後續頁面中的單元格都不會有這個單擊事件。換句話說，.bind()只能給呼叫它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件（類似於新來的員工收不到快遞）。

事件委託可以解決上述兩個問題。具體到**上，只要用jquery 1.3新增的.live()方法代替.bind()方法即可：

$

("#info_table td"
).live
("click"
,function
());

到目前為止，一切似乎很完美。可惜，事實並非如此。因為.live()方法並不完美，它有如下幾個主要缺點：

為了避免生成不必要的jquery物件，可以使用一種叫做「早委託」的hack，即在$(document).ready()方法外部呼叫.live()：

(

function($
));})(
jquery
);

為了避免事件冒泡造成的效能損失，jquery從1.4開始支援在使用.live()方法時配合使用乙個上下文引數：

$

("td",$
("#info_table")[0
]).live
("click"
,function
());

如前所述，為了突破單一.bind()方法的侷限性，實現事件委託，jquery 1.3引入了.live()方法。後來，為解決「事件傳播鏈」過長的問題，jquery 1.4又支援為.live()方法指定上下文物件。而為了解決無謂生成元素集合的問題，jquery 1.4.2乾脆直接引入了乙個新方法.delegate()。

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

$

("#info_table"
).delegate
("td"
,"click"
,function
());

可見，.delegate()方法是乙個相對完美的解決方案。但在dom結構簡單的情況下，也可以使用.live()。

在下列情況下，應該使用.live()或.delegate()，而不能使用.bind()：

ps：根據jquery 1.7 beta 1的發版說明，jquery 1.7為了解決.bind()、.live()和.delegate()並存造成的不一致性問題，將會增加一對新的事件方法：.on()和.off()：

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);

如果指定selector，則為事件委託；否則，就是常規繫結。新舊api對應如下：

jQuery 事件委託

本文 隨著dom結構的複雜化和ajax等動態指令碼技術的運用，事件委託自然浮出了水面 jquery為繫結和委託事件提供了.bind live 和.delegate 方法。本文在討論這幾個方法內部實現的基礎上，展示它們的優劣勢及適用場合。事件委託 事件委託的事例在現實當中比比皆是。比如，有三個同事預計...

jQuery 事件委託

概念 什麼是事件委託 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法 一是三個人在公司門口等快...

jquery事件委託

概念 什麼是事件委託 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法 一是三個人在公司門口等快...