隨著DOM結(jié)構(gòu)的復(fù)雜化和Ajax等動態(tài)腳本技術(shù)的運(yùn)用，有了較多的動態(tài)添加進(jìn)來的元素，直接用JQ添加click事件會發(fā)現(xiàn)新添加進(jìn)來的元素并不能直接選取到，在這里就需要用到事件委托方法，JQ為事件委托提供了live（）、dalegate（）和on（）方法。???

事件委托

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

.live()

jQuery 1.3新增的live()方法，用法如下：

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

這里的.live()方法會把click事件綁定到$(document)對象，而且只需要給$(document)綁定一次，然后就能夠處理后續(xù)動態(tài)加載的單元格的單擊事件。在接收到任何事件時，$(document)對象都會檢查事件類型和事件目標(biāo)，如果是click事件且事件目標(biāo)是td，那么就執(zhí)行委托給它的處理程序。

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

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

解決之道

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

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

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

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

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

這樣，“受托方”就從默認(rèn)的$(document)變成了$("#infotable")[0]，節(jié)省了冒泡的旅程。不過，與.live()共同使用的上下文參數(shù)必須是一個單獨(dú)的DOM元素，所以這里指定上下文對象時使用的是$("#infotable")[0]，即使用數(shù)組的索引操作符來取得的一個DOM元素。

.delegate()

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

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

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

使用.delegate()有如下優(yōu)點(diǎn)（或者說解決了.live()方法的如下問題）：

• 直接將目標(biāo)元素選擇符（"td"）、事件（"click"）及處理程序與“受拖方”$("#info_table")綁定，不額外收集元素、事件傳播路徑縮短、語義明確；
• 支持在連綴的DOM遍歷方法后面調(diào)用，即支持$("table").find("#info").delegate...，支持精確控制；

可見，.delegate()方法是一個相對完美的解決方案。但在DOM結(jié)構(gòu)簡單的情況下，也可以使用.live()。

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

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

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

?.on()

根據(jù)jQuery 1.7 Beta 1的發(fā)版說明，jQuery 1.7為了解決.bind()、.live()和.delegate()并存造成的不一致性問題，將會增加一對新的事件方法：.on()和.off(),以下為on（）的實(shí)現(xiàn)方式：

.on( events [, selector ] [, data ], handler(eventObject) )

一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣。
在需要為較多的元素綁定事件的時候，優(yōu)先考慮事件委托，可以帶來性能上的好處。比如：?

?

如上圖，將click事件綁定在document對象上，頁面上任何元素發(fā)生的click事件都冒泡到document對象上得到處理。

注意到.on()的描述中第二個可選參數(shù)：selector。如下圖，添加了第二個參數(shù)，選擇符button：

?結(jié)果：

當(dāng)事件冒泡到document對象時，檢測事件的target，如果與傳入的選擇符（這里是button）匹配，就觸發(fā)事件，否則不觸發(fā)。?

注意.on()也可以接收一個對象參數(shù)，該對象的屬性是事件類型，屬性值為事件處理函數(shù)。下面是官方文檔的一個例子：

?

最后有一點(diǎn)，原先的live()方法，處理函數(shù)是默認(rèn)綁定在document對象上不能變的，如果DOM嵌套結(jié)構(gòu)很深，事件冒泡通過大量祖先元素會導(dǎo)致較大的性能損失。而使用.on()方法，事件只會綁定到$()函數(shù)的選擇符表達(dá)式匹配的元素上（上面我的例子中，為了簡單綁定到了document），因此可以精確地定位到頁面中的一部分，而事件冒泡的開銷也可以減少。delegate()與on()同理，畢竟是用on()實(shí)現(xiàn)的：

?.on()和.off()：實(shí)現(xiàn)方式
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector，則為事件委托；否則，就是常規(guī)綁定。新舊API對應(yīng)如下：

?

轉(zhuǎn)載于:https://www.cnblogs.com/wolfocme110/p/4130965.html

總結(jié)

以上是生活随笔為你收集整理的JQ 为未来元素添加事件处理器—事件委托的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。