什麼是事件委託

2021-07-15 10:23:04 字數 3083 閱讀 5476

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

事件委託

事件委託的事例在現實當中比比皆是。比如,有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案(公司也不會容忍那麼多員工站在門口就為了等快遞)。前台mm收到快遞後,她會判斷收件人是誰,然後按照收件人的要求簽收,甚至代為付款。這種方案還有乙個優勢,那就是即使公司裡來了新員工(不管多少),前台mm也會在收到寄給新員工的快遞後核實並代為簽收。我們知道,dom在為頁面中的每個元素分派事件時,相應的元素一般都在事件冒泡階段處理事件。在類似 body > div > a 這樣的結構中,如果單擊a元素,click事件會從a一直冒泡到div和body(即document物件)。因此,發生在a上面的單擊事件,div和body元素同樣可以處理。而利用事件傳播(這裡是冒泡)這個機制,就可以實現事件委託。具體來說,事件委託就是事件目標自身不處理事件,而是把處理任務委託給其父元素或者祖先元素,甚至根元素(document)。

.bind()

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

$(

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

問題是,如果**中要繫結單擊事件的有10列500行,那麼查詢和遍歷5000個單元格會導致指令碼執行速度明顯變慢,而儲存5000個td元素和相應的事件處理程式也會占用大量記憶體(類似於讓每個人親自站在門口等快遞)。

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

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

$("#info_table

td").live("click",function()

);

這裡的.live()方法會把click事件繫結到$(document)物件(但這一點從**中體現不出來,這也是.live()方法飽受詬病的乙個重要原因,稍後再詳細討論),而且只需要給$(document)繫結一次(不是50次,更不是5000次),然後就能夠處理後續動態載入的**單元格的單擊事件。在接收到任何事件時,$(document)物件都會檢查事件型別和事件目標,如果是click事件且事件目標是td,那麼就執行委託給它的處理程式。

.live()

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

收集td元素並建立jquery物件,但實際操作的卻是$(document)物件,令人費解。

解決之道

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

(function($));

})(jquery);

在此,(function($))(jquery)是乙個「立即執行的匿名函式」,構成了乙個閉包,可以防止命名衝突。在匿名函式內部,$引數引用jquery物件。這個匿名函式不會等到dom就緒就會執行。注意,使用這個hack時,指令碼必須是在頁面的head元素中鏈結和(或)執行的。之所以選擇這個時機,因為這時候剛好document元素可用,而整個dom還遠未生成;如果把指令碼放在結束的body標籤前面,就沒有意義了,因為那時候dom已經完全可用了。

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

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

這樣,「受託方」就從預設的$(document)變成了$("#info_table")[0],節省了冒泡的旅程。不過,與.live()共同使用的上下文引數必須是乙個單獨的dom元素,所以這裡指定上下文物件時使用的是$("#info_table")[0],即使用陣列的索引操作符來取得的乙個dom元素。

.delegate()

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

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

);

使用.delegate()有如下優點(或者說解決了.live()方法的如下問題):

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

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

為dom中的很多元素繫結相同事件;

為dom中尚不存在的元素繫結事件;

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對應如下:

什麼是委託?為什麼要使用委託?什麼是事件?

1 什麼是委託?首先宣告乙個委託 public delegate string islengthfive string s 下面寫幾個方法 public string dowork string a public string dosomework string b public string do...

委託與事件學習筆記1 什麼是委託?

女兒想吃棒冰了,但又不想自己頂著太陽出去買 買棒冰是乙個method 所以她叫他倒霉的老爸去買 delegate 最後女兒吃到了棒冰。這就是乙個委託的過程。接下去,讓我們看看一些對委託的解釋 委託是用來處理其他語言 如 c pascal 和 modula 需用函式指標來處理的情況的。不過與 c 函式...

什麼是委託?

思考 static關鍵字是什麼?加上這個關鍵字,這個方法只能,在本類中使用!簡記 想做什麼事情,但是又不確定,就用委託佔位 然後將方法作為傳遞!1 什麼是委託?委託就是把 方法 作為引數進行傳遞!委託是一種 資料型別 像類一樣 可以宣告委託型別變數 2 定義的方法沒有返回值,那麼定義的委託也沒有返回...