對(duì)“事件處理程序過(guò)多”問(wèn)題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個(gè)事 件處理程序，就可以管理某一類型的所有事件。例如，click 事件會(huì)一直冒泡到 document 層次。也就 是說(shuō)，我們可以為整個(gè)頁(yè)面指定一個(gè) onclick 事件處理程序，而不必給每個(gè)可單擊的元素分別添加事 件處理程序。以下面的 HTML代碼為例。?

? ? ? ?
• Go somewhere

? ? ? ?
• Do something
?
? ? ? ?
• Say hi
?
? ? ? ?

?
? ? ? ?其中包含 3個(gè)被單擊后會(huì)執(zhí)行操作的列表項(xiàng)。按照傳統(tǒng)的做法，需要像下面這樣為它們添加 3個(gè)事 件處理程序。?
? ? ? ?var item1 = document.getElementById("goSomewhere");?
? ? ? ?var item2 = document.getElementById("doSomething");
? ? ? ?var item3 = document.getElementById("sayHi");?

? ? ? ?EventUtil.addHandler(item1, "click", function(event){
? ? ? ? ? ? ? location.href = "http://www.myforexfactory.net";?
? ? ? ?});?

? ? ? ?EventUtil.addHandler(item2, "click", function(event){?
? ? ? ? ? ?document.title = "I changed the document's title";?
? ? ? ?});?

? ? ? ?EventUtil.addHandler(item3, "click", function(event){
? ? ? ? ? ? ? ?alert("hi");?
? ? ? ?});
? ? ? ?如果在一個(gè)復(fù)雜的 Web 應(yīng)用程序中，對(duì)所有可單擊的元素都采用這種方式，那么結(jié)果就會(huì)有數(shù)不 清的代碼用于添加事件處理程序。此時(shí)，可以利用事件委托技術(shù)解決這個(gè)問(wèn)題。使用事件委托，只需在 DOM樹(shù)中盡量高的層次上添加一個(gè)事件處理程序，下面由南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端工程師結(jié)合完整實(shí)例作一個(gè)介紹，如如下面的例子所示。?
? ? ? ?


? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?
• Go somewhere

? ? ? ? ? ? ?
• Do something

? ? ? ? ? ? ?
• Say hi

? ? ? ?

? ? ? ?


? ? ? ?在這段代碼里，我們使用事件委托只為

元素添加了一個(gè) onclick 事件處理程序。由于所有列 表項(xiàng)都是這個(gè)元素的子節(jié)點(diǎn)，而且它們的事件會(huì)冒泡，所以單擊事件終會(huì)被這個(gè)函數(shù)處理。我們知道， 事件目標(biāo)是被單擊的列表項(xiàng)，故而可以通過(guò)檢測(cè) id 屬性來(lái)決定采取適當(dāng)?shù)牟僮?。與前面未使用事件委 托的代碼比一比，會(huì)發(fā)現(xiàn)這段代碼的事前消耗更低，因?yàn)橹蝗〉昧艘粋€(gè) DOM元素，只添加了一個(gè)事件 處理程序。雖然對(duì)用戶來(lái)說(shuō)終的結(jié)果相同，但這種技術(shù)需要占用的內(nèi)存更少。所有用到按鈕的事件（多 數(shù)鼠標(biāo)事件和鍵盤(pán)事件）都適合采用事件委托技術(shù)。?
? ? ? ?如果可行的話，也可以考慮為 document 對(duì)象添加一個(gè)事件處理程序，用以處理頁(yè)面上發(fā)生的某種 特定類型的事件。這樣做與采取傳統(tǒng)的做法相比具有如下優(yōu)點(diǎn)。
? ? ? ? ◎document 對(duì)象很快就可以訪問(wèn)，而且可以在頁(yè)面生命周期的任何時(shí)點(diǎn)上為它添加事件處理程序 （無(wú)需等待 DOMContentLoaded 或 load 事件）。換句話說(shuō)，只要可單擊的元素呈現(xiàn)在頁(yè)面上， 就可以立即具備適當(dāng)?shù)墓δ堋?
? ? ? ?◎在頁(yè)面中設(shè)置事件處理程序所需的時(shí)間更少。只添加一個(gè)事件處理程序所需的 DOM引用更少， 所花的時(shí)間也更少。?
? ? ? ?◎整個(gè)頁(yè)面占用的內(nèi)存空間更少，能夠提升整體性能。?
? ? ? ?最適合采用事件委托技術(shù)的事件包括click、mousedown、mouseup、keydown、keyup 和keypress。 雖然 mouseover 和mouseout 事件也冒泡，但要適當(dāng)處理它們并不容易，而且經(jīng)常需要計(jì)算元素的位置。 （因?yàn)楫?dāng)鼠標(biāo)從一個(gè)元素移到其子節(jié)點(diǎn)時(shí)，或者當(dāng)鼠標(biāo)移出該元素時(shí)，都會(huì)觸發(fā) mouseout 事件。）?
? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌APP開(kāi)發(fā)公司-百恒網(wǎng)絡(luò) http://www.myforexfactory.net/app/index.html 如轉(zhuǎn)載請(qǐng)注明出處!