事件流
事件流描述的是從頁面中接收事件的順序。但有意思的是，IE 和 Netscape 開發(fā)團隊居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕獲流。
-
事件冒泡
IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。以下面的HTML頁面為例：
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
//如果你單擊了頁面中的 <div> 元素，那么這個 click 事件會按照如下順序傳播：
div=>body=>html=>document。也就是說，click 事件首先在 <div> 元素上發(fā)生，而這個元素就是我們單擊的元素。然后，click 事件沿 DOM 樹向上傳播，在每一級節(jié)點上都會發(fā)生，直至傳播到 document 對象。下圖展示了事件冒泡的過程:
由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議大家放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。
-
事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲（event capturing）。事件捕獲的思想是不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。如果仍以前面的 HTML 頁面作為演示事件捕獲的例子，那么單擊 <div> 元素就會以下列順序觸發(fā) click 事件:
document=>html=>body=>div。在事件捕獲過程中，document 對象首先接收到 click 事件，然后事件沿 DOM 樹依次向下，一直傳播到事件的實際目標，即 <div> 元素。下圖展示了事件捕獲的過程：
事件捕獲.jpg
由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議大家放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。 -
DOM事件流
“DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)送的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。下圖展示了事件流的過程：
事件流.jpg
注：
1.實際目標捕獲事件被歸為了事件冒泡階段。
2.多數(shù)支持 DOM 事件流的瀏覽器都實現(xiàn)了一種特定的行為：即使“DOM2 級事件”規(guī)范明確要求捕獲階段不會涉及事件目標，但高版本瀏覽器都會在捕獲階段觸發(fā)事件對象上的事件。結(jié)果，就是有兩個機會再目標對象上面操作事件。
事件處理程序
-
HTML事件處理程序
某個元素支持的每種事件，都可以使用一個與相應事件處理程序同名的 HTML 特性來指定。這個特性的值應該是能夠執(zhí)行的 JavaScript 代碼。例如，要在按鈕被單擊時執(zhí)行一些 JavaScript，可以像下面這樣編寫代碼：
<input type="button" value="Click Me" onclick="console.log('Clicked')" />
缺點：
（1）首先，存在一個時差問題。因為用戶可能會在 HTML 元素一出現(xiàn)在頁面上就觸發(fā)相應的事件，但當時的事件處理程序有可能尚不具備執(zhí)行條件。以前面的例子來說明，假設 showMessage() 函數(shù)是在按鈕下方、頁面的最底部定義的。如果用戶在頁面解析 showMessage() 函數(shù)之前就單擊了按鈕，就會引發(fā)錯誤。為此，很多HTML事件處理程序都會被封裝在一個 try-catch 塊中，以便錯誤不會浮出水面，如下面的例子所示：
<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">
這樣，如果在 showMessage() 函數(shù)有定義之前單擊了按鈕，用戶將不會看到 JavaScript 錯誤，因為在瀏覽器有機會處理錯誤之前，錯誤就被捕獲了。
（2）這樣擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同結(jié)果。不同 JavaScript 引擎遵循的標識符解析規(guī)則略有差異，很可能會在訪問非限定對象成員時出錯。
（3）HTML 與 JavaScript 代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方：HTML 代碼和 JavaScript 代碼。而這正是許多開發(fā)人員摒棄 HTML 事件處理程序，轉(zhuǎn)而使用 JavaScript 指定事件處理程序的原因所在。
-
DOM0級事件處理程序
通過 JavaScript 指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴＿@種為事件處理程序賦值的方法是在第四代Web瀏覽器中出現(xiàn)的，而且至今仍然為所有現(xiàn)代瀏覽器所支持。原因一是簡單，二是具有跨瀏覽器的優(yōu)勢。要使用 JavaScript 指定事件處理程序，首先必須取得一個要操作的對象的引用。
每個元素（包括 window 和 document）都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫，例如 onclick。將這種屬性的值設置為一個函數(shù)，就可以指定事件處理程序，如下所示:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log("Clicked");
};
在此，我們通過文檔對象取得了一個按鈕的引用，然后為它指定了 onclick 事件處理程序。但要注意，在這些代碼運行以前不會指定事件處理程序，因此如果這些代碼在頁面中位于按鈕后面，就有可能在一段時間內(nèi)怎么單擊都沒有反應。
使用 DOM1 級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中的 this 引用當前元素。來看一個例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log(this.id); // "myBtn"
};
也可以刪除通過 DOM1 級方法指定的事件處理程序，只要像下面這樣將事件處理程序?qū)傩缘闹翟O置為 null 即可：
btn.onclick = null; // 刪除事件處理程序
-
DOM2級事件處理程序
DOM2 級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener() 和 removeEventListener()。所有 DOM 節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是 true，表示在捕獲階段調(diào)用事件處理程序；如果是 false，表示在冒泡階段調(diào)用事件處理程序。
要在按鈕上為 click 事件添加事件處理程序，可以使用下列代碼：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
上面的代碼為一個按鈕添加了 onclick 事件處理程序，而且該事件會在冒泡階段被觸發(fā)（因為最后一個參數(shù)是 false）。與 DOM1 級方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運行。使用 DOM2 級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.addEventListener("click", function(){
console.log("Hello world!");
}, false);
在這個例子中，我們使用 addEventListener() 添加了一個事件處理程序。雖然調(diào)用 removeEventListener() 時看似使用了相同的參數(shù)，但實際上，第二個參數(shù)與傳入 addEventListener() 中的那一個是完全不同的函數(shù)。而傳入 removeEventListener() 中的事件處理程序函數(shù)必須與傳 入addEventListener() 中的相同，如下面的例子所示。
var btn = document.getElementById("myBtn");
var handler = function(){
console.log(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); // 有效！
重寫后的這個例子沒有問題，是因為在 addEventListener() 和 removeEventListener() 中使用了相同的函數(shù)。
大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件到達目標之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。如果不是特別需要，我們不建議在事件捕獲階段注冊事件處理程序。
-
IE事件處理程序
IE 實現(xiàn)了與 DOM 中類似的兩個方法：attachEvent() 和 detachEvent()。這兩個方法接受相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。由于 IE8 及更早版本只支持事件冒泡，所以通過 attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
要使用 attachEvent() 為按鈕添加一個事件處理程序，可以使用以下代碼。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
console.log("Clicked");
});
注意，attachEvent() 的第一個參數(shù)是 "onclick"，而非 DOM 的 addEventListener() 方法中的 "click"。
在 IE 中使用 attachEvent() 與使用 DOM1 級方法的主要區(qū)別在于事件處理程序的作用域。在使用 DOM1 級方法的情況下，事件處理程序會在其所屬元素的作用域內(nèi)運行；在使用 attachEvent() 方法的情況下，事件處理程序會在全局作用域中運行，因此 this 等于 window。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
console.log(this === window); // true
});
在編寫跨瀏覽器的代碼時，牢記這一區(qū)別非常重要。
與 addEventListener() 類似，attachEvent() 方法也可以用來為一個元素添加多個事件處理程序。不過，與 DOM 方法不同的是，這些事件處理程序不是以添加它們的順序執(zhí)行，而是以相反的順序被觸發(fā)。
使用 attachEvent() 添加的事件可以通過 detachEvent() 來移除，條件是必須提供相同的參數(shù)。與 DOM 方法一樣，這也意味著添加的匿名函數(shù)將不能被移除。不過，只要能夠?qū)ο嗤瘮?shù)的引用傳給 detachEvent()，就可以移除相應的事件處理程序。
-
跨瀏覽器的事件處理程序
為了以跨瀏覽器的方式處理事件，不少開發(fā)人員會使用能夠隔離瀏覽器差異的 JavaScript 庫，還有一些開發(fā)人員會自己開發(fā)最合適的事件處理的方法。自己編寫代碼其實也不難，只要恰當?shù)厥褂媚芰z測即可。要保證處理事件的代碼能在大多數(shù)瀏覽器下一致地運行，只需關(guān)注冒泡階段。
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
這兩個方法首先都會檢測傳入的元素中是否存在 DOM2 級方法。如果存在 DOM2 級方法，則使用該方法：傳入事件類型、事件處理程序函數(shù)和第三個參數(shù) false（表示冒泡階段）。如果存在的是 IE 的方法，則采取第二種方案。注意，為了在 IE8 及更早版本中運行，此時的事件類型必須加上 "on" 前綴。最后一種可能就是使用 DOM1 級方法（在現(xiàn)代瀏覽器中，應該不會執(zhí)行這里的代碼）。此時，我們使用的是方括號語法來將屬性名指定為事件處理程序，或者將屬性設置為 null。
可以像下面這樣使用 EventUtil 對象：
var btn = document.getElementById("myBtn");
var handler = function(){
console.log("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);
addHandler() 和 removeHandler() 沒有考慮到所有的瀏覽器問題，例如在 IE 中的作用域問題。不過，使用它們添加和移除事件處理程序還是足夠了。
事件對象
在觸發(fā) DOM 上的某個事件時，會產(chǎn)生一個事件對象 event，這個對象中包含著所有與事件有關(guān)的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。例如，鼠標操作導致的事件對象中，會包含鼠標位置的信息，而鍵盤操作導致的事件對象中，會包含與按下的鍵有關(guān)的信息。所有瀏覽器都支持 event 對象，但支持方式不同。
-
跨瀏覽器的事件對象*
雖然 DOM 和 IE 中的 event 對象不同，但基于它們之間的相似性依舊可以拿出跨瀏覽器的方案來。IE中 event 對象的全部信息和方法 DOM 對象中都有，只不過實現(xiàn)方式不一樣。不過，這種對應關(guān)系讓實現(xiàn)兩種事件模型之間的映射非常容易。可以對前面介紹的 EventUtil 對象加以增強，添加如下方法以求同存異。
var EventUtil = {
addHandler: function(element, type, handler){
// 省略的代碼
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
// 省略的代碼
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
