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

? ? ? ?
• Go somewhere

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

?
? ? ? ?其中包含 3個被單擊后會執(zhí)行操作的列表項。按照傳統的做法，需要像下面這樣為它們添加 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.myforexfactory.net";?
? ? ? ?});?

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

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


? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?
• Go somewhere

? ? ? ? ? ? ?
• Do something

? ? ? ? ? ? ?
• Say hi

? ? ? ?

? ? ? ?


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

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