傳統(tǒng)的事件處理 事件委托就是在一個頁面上使用一個事件來管理多種類型的事件。這并不是一個新的想法，但對于把握性能來說卻很重要。通常情況，你會在web應(yīng)用程序中看到這樣的代碼：
document.getElementById("help-btn").onclick = function(event){ openHelp(); };
document.getElementById("save-btn").onclick = function(event){ saveDocument(); };
document.getElementById("undo-btn").onclick = function(event){ undoChanges(); };
這種傳統(tǒng)的編碼方式給每個元素分配單獨的事件處理方法。對于交互少的站點來說，這樣做是可以的。然而，對于大型的wen應(yīng)用程序，當存在大量的事件處理的時候，就會顯得反應(yīng)遲鈍。這里要關(guān)注的不是速度問題，而是內(nèi)存占用問題。如果有數(shù)百個交互，DOM元素和JavaScript代碼就會有數(shù)百個關(guān)聯(lián)。web應(yīng)用需要占用的內(nèi)存越多，它的響應(yīng)速度就越慢。事件委托能將這個問題減小。
事件冒泡及捕獲
要不是事件的下面這些屬性，事件委托將成為可能。早期的web開發(fā)，瀏覽器廠商很難回答一個哲學上的問題：當你在頁面上的一個區(qū)域點擊時，你真正感興趣的是哪個元素。這個問題帶來了交互的定義。在一個元素的界限內(nèi)點擊，顯得有點含糊。畢竟，在一個元素上的點擊同時也發(fā)生在另一個元素的界限內(nèi)。例如單擊一個按鈕。你實際上點擊了按鈕區(qū)域、body元素的區(qū)域以及html元素的區(qū)域。
伴隨著這個問題，兩種主流的瀏覽器Netscape和IE有不同的解決方案。Netscape定義了一種叫做事件捕獲的處理方法，事件首先發(fā)生在DOM樹的最高層對象(document)然后往最深層的元素傳播。在圖例中，事件捕獲首先發(fā)生在document上，然后是html元素，body元素，最后是button元素。IE的處理方法正好相反。他們定義了一種叫事件冒泡的方法。事件冒泡認為事件促發(fā)的最深層元素首先接收事件。然后是它的父元素，依次向上，知道document對象最終接收到事件。盡管相對于html元素來說，document沒有獨立的視覺表現(xiàn)，他仍然是html元素的父元素并且事件能冒泡到document元素。所以圖例中噢噢那個button元素先接收事件，然后是body、html最后是document。
在定義DOM的時候,W3C顯然看到了這兩種方案各自的優(yōu)點，所以DOM Level2的事件規(guī)范中同時定義了這兩種方案。首先document元素獲得事件，然后捕獲階段向與事件最相關(guān)的元素傳播，當事件被此元素捕獲后，再冒泡到document元素。addEventListener()方法接受三個參數(shù)：事件名，事件處理函數(shù)，一個用于指定事件在捕獲階段處理還是在冒泡階段處理的布爾值。大部分的web開發(fā)者都會使用false作為第三個參數(shù)這樣就跟IE中的attachEvent()一樣了。
//bubbling phase handler
document.addEventListener("click", handleClick, false);
//capturing phase handler
document.addEventListener("click", handleClick, true);
通過冒泡實現(xiàn)事件委托
事件委托的關(guān)鍵就是在通過冒泡方式實現(xiàn)在最高層(通常是document)處理事件。不是所有的事件都支持冒泡，但是鼠標和鍵盤事件支持，并且這也是你所關(guān)心的?；仡櫹虑懊娴睦?，你可以通過在document上分配一個事件來處理所有的單擊事件，只需要通過區(qū)別節(jié)點來決定處理事件的方法。
document.onclick = function(event){
//IE doesn't pass in the event object
event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
switch(target.id){
case "help-btn":
openHelp();
break;
case "save-btn":
saveDocument();
break;
case "undo-btn":
undoChanges();
break;
//others?
}
};
使用事件委托，數(shù)個事件處理函數(shù)可以使用一個函數(shù)來管理。所有的單擊事件被委托給一個合適的函數(shù)來處理。同樣，
mousedown,
mouseup,
mousemove,
mouseover,
mouseout,
dblclick,
keyup,
keydown, 和
keypress事件也可以這樣處理。但是，在事件委托中mouseover和mouseout的處理方法是不同的，當鼠標從一個元素移動到它的子元素內(nèi)的時候，被認為是"out"。
注意：你也可以使用事件捕獲來完成事件委托，但這只能用在支持事件捕獲的非IE瀏覽器中。
優(yōu)點
事件委托對于web應(yīng)用程序的性能有如下幾個優(yōu)點：
1.需要管理的函數(shù)變少了
2.占用的內(nèi)存少了
3.javascript代碼和Dom結(jié)構(gòu)之間的關(guān)聯(lián)更少了
4.在改變DOM結(jié)構(gòu)中的innerHTML時，不需要改動事件處理函數(shù)
從傳統(tǒng)的事件處理方法轉(zhuǎn)向事件委托提高了大型web應(yīng)用的性能。正因為它如此的重要，一些類似于YUI、jQuey的javascript庫也開始將事件委托應(yīng)用在它們的核心接口中。實現(xiàn)事件委托是很輕松的，卻能帶來性能上很大的提高。尤其表現(xiàn)在你將數(shù)十個事件處理函數(shù)整合到一個函數(shù)里。試一下事件委托，你就不會再使用傳統(tǒng)的事件處理方法了。
翻譯完了，發(fā)現(xiàn)自己的英語水平可真夠爛的。。。
