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

? ? ? ?
• Go somewhere

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

?
? ? ? ?其中包含 3個被單擊后會執(zhí)行操作的列表項。按照傳統(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.gimmickmag.com";?
? ? ? ?});?

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

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


? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?
• Go somewhere

? ? ? ? ? ? ?
• Do something

? ? ? ? ? ? ?
• Say hi

? ? ? ?

? ? ? ?


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

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