|
傳統(tǒng)的事件處理
事件委托就是在一個頁面上使用一個事件來管理多種類型的事件。這并不是一個新的想法，但對于把握性能來說卻很重要。通常情況，你會在web應用程序中看到這樣的代碼：
document.getElementById("help-btn").onclick = function(event){ openHelp(); };
document.getElementById("save-btn").onclick = function(event){ saveDocument(); }; document.getElementById("undo-btn").onclick = function(event){ undoChanges(); }; 事件冒泡及捕獲
要不是事件的下面這些屬性，事件委托將成為可能。早期的web開發(fā)，瀏覽器廠商很難回答一個哲學上的問題：當你在頁面上的一個區(qū)域點擊時，你真正感興趣
的是哪個元素。這個問題帶來了交互的定義。在一個元素的界限內點擊，顯得有點含糊。畢竟，在一個元素上的點擊同時也發(fā)生在另一個元素的界限內。例如單擊一
個按鈕。你實際上點擊了按鈕區(qū)域、body元素的區(qū)域以及html元素的區(qū)域。
 IE
的處理方法正好相反。他們定義了一種叫事件冒泡的方法。事件冒泡認為事件促發(fā)的最深層元素首先接收事件。然后是它的父元素，依次向上，知道
document對象最終接收到事件。盡管相對于html元素來說，document沒有獨立的視覺表現(xiàn)，他仍然是html元素的父元素并且事件能冒泡到
document元素。所以圖例中噢噢那個button元素先接收事件，然后是body、html最后是document。
在定義DOM的時候,W3C顯然看到了這兩種方案各自的優(yōu)點，所以DOM Level
2的事件規(guī)范中同時定義了這兩種方案。首先document元素獲得事件，然后捕獲階段向與事件最相關的元素傳播，當事件被此元素捕獲后，再冒泡到
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)事件委托
事
件委托的關鍵就是在通過冒泡方式實現(xiàn)在最高層(通常是document)處理事件。不是所有的事件都支持冒泡，但是鼠標和鍵盤事件支持，并且這也是你所關
心的。回顧下前面的例子，你可以通過在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? } }; 注意：你也可以使用事件捕獲來完成事件委托，但這只能用在支持事件捕獲的非IE瀏覽器中。
優(yōu)點
事件委托對于web應用程序的性能有如下幾個優(yōu)點：
1.需要管理的函數(shù)變少了
2.占用的內存少了
3.javascript代碼和Dom結構之間的關聯(lián)更少了
4.在改變DOM結構中的innerHTML時，不需要改動事件處理函數(shù)
從
傳統(tǒng)的事件處理方法轉向事件委托提高了大型web應用的性能。正因為它如此的重要，一些類似于YUI、jQuey的javascript庫也開始將事件委
托應用在它們的核心接口中。實現(xiàn)事件委托是很輕松的，卻能帶來性能上很大的提高。尤其表現(xiàn)在你將數(shù)十個事件處理函數(shù)整合到一個函數(shù)里。試一下事件委托，你
就不會再使用傳統(tǒng)的事件處理方法了。
翻譯完了，發(fā)現(xiàn)自己的英語水平可真夠爛的。。。
|
|
|
來自： 一個人的libra... > 《javascript》
