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

? ? ? ?
• Go somewhere

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

?
? ? ? ?其中包含 3個被單擊后會執(zhí)行操作的列表項(xiàng)。按照傳統(tǒng)的做法，需要像下面這樣為它們添加 3個事 件處理程序。?
? ? ? ?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.dgscpc.com";?
? ? ? ?});?

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

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


? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?
• Go somewhere

? ? ? ? ? ? ?
• Do something

? ? ? ? ? ? ?
• Say hi

? ? ? ?

? ? ? ?


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

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