事件流
事件流描述的是從頁面中接收事件的順序。但有意思的是黄锤，IE 和 Netscape 開發(fā)團(tuán)隊(duì)居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕獲流掩蛤。
-
事件冒泡
IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點(diǎn)）接收陈肛，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)（文檔）揍鸟。以下面的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é)點(diǎn)上都會發(fā)生港华，直至傳播到 document 對象道川。下圖展示了事件冒泡的過程:
由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲立宜。我們也建議大家放心地使用事件冒泡冒萄，在有特殊需要時再使用事件捕獲。
-
事件捕獲
Netscape Communicator 團(tuán)隊(duì)提出的另一種事件流叫做事件捕獲（event capturing）橙数。事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件尊流，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前捕獲它灯帮。如果仍以前面的 HTML 頁面作為演示事件捕獲的例子崖技，那么單擊 <div> 元素就會以下列順序觸發(fā) click 事件:
document=>html=>body=>div逻住。在事件捕獲過程中，document 對象首先接收到 click 事件迎献，然后事件沿 DOM 樹依次向下瞎访，一直傳播到事件的實(shí)際目標(biāo)，即 <div> 元素吁恍。下圖展示了事件捕獲的過程：
事件捕獲.jpg
由于老版本的瀏覽器不支持扒秸，因此很少有人使用事件捕獲。我們也建議大家放心地使用事件冒泡冀瓦，在有特殊需要時再使用事件捕獲伴奥。 -
DOM事件流
“DOM2級事件”規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段翼闽。首先發(fā)送的是事件捕獲拾徙，為截獲事件提供了機(jī)會。然后是實(shí)際的目標(biāo)接收到事件肄程。最后一個階段是冒泡階段锣吼，可以在這個階段對事件做出響應(yīng)。下圖展示了事件流的過程：
事件流.jpg
注：
1.實(shí)際目標(biāo)捕獲事件被歸為了事件冒泡階段蓝厌。
2.多數(shù)支持 DOM 事件流的瀏覽器都實(shí)現(xiàn)了一種特定的行為：即使“DOM2 級事件”規(guī)范明確要求捕獲階段不會涉及事件目標(biāo)玄叠，但高版本瀏覽器都會在捕獲階段觸發(fā)事件對象上的事件。結(jié)果拓提，就是有兩個機(jī)會再目標(biāo)對象上面操作事件读恃。
事件處理程序
-
HTML事件處理程序
某個元素支持的每種事件科展，都可以使用一個與相應(yīng)事件處理程序同名的 HTML 特性來指定握玛。這個特性的值應(yīng)該是能夠執(zhí)行的 JavaScript 代碼。例如蕉毯，要在按鈕被單擊時執(zhí)行一些 JavaScript蹦疑，可以像下面這樣編寫代碼：
<input type="button" value="Click Me" onclick="console.log('Clicked')" />
缺點(diǎn)：
（1）首先西雀，存在一個時差問題。因?yàn)橛脩艨赡軙?HTML 元素一出現(xiàn)在頁面上就觸發(fā)相應(yīng)的事件歉摧，但當(dāng)時的事件處理程序有可能尚不具備執(zhí)行條件艇肴。以前面的例子來說明，假設(shè) showMessage() 函數(shù)是在按鈕下方叁温、頁面的最底部定義的再悼。如果用戶在頁面解析 showMessage() 函數(shù)之前就單擊了按鈕，就會引發(fā)錯誤膝但。為此冲九，很多HTML事件處理程序都會被封裝在一個 try-catch 塊中，以便錯誤不會浮出水面跟束，如下面的例子所示：
<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">
這樣莺奸，如果在 showMessage() 函數(shù)有定義之前單擊了按鈕丑孩，用戶將不會看到 JavaScript 錯誤，因?yàn)樵跒g覽器有機(jī)會處理錯誤之前灭贷，錯誤就被捕獲了嚎杨。
（2）這樣擴(kuò)展事件處理程序的作用域鏈在不同瀏覽器中會導(dǎo)致不同結(jié)果。不同 JavaScript 引擎遵循的標(biāo)識符解析規(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è)置為一個函數(shù)魂挂，就可以指定事件處理程序，如下所示:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log("Clicked");
};
在此馁筐，我們通過文檔對象取得了一個按鈕的引用涂召，然后為它指定了 onclick 事件處理程序。但要注意敏沉，在這些代碼運(yùn)行以前不會指定事件處理程序果正，因此如果這些代碼在頁面中位于按鈕后面，就有可能在一段時間內(nèi)怎么單擊都沒有反應(yīng)赦抖。
使用 DOM1 級方法指定的事件處理程序被認(rèn)為是元素的方法舱卡。因此，這時候的事件處理程序是在元素的作用域中運(yùn)行队萤；換句話說轮锥，程序中的 this 引用當(dāng)前元素。來看一個例子要尔。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log(this.id); // "myBtn"
};
也可以刪除通過 DOM1 級方法指定的事件處理程序舍杜，只要像下面這樣將事件處理程序?qū)傩缘闹翟O(shè)置為 null 即可：
btn.onclick = null; // 刪除事件處理程序
-
DOM2級事件處理程序
DOM2 級事件定義了兩個方法新娜，用于處理指定和刪除事件處理程序的操作：addEventListener() 和 removeEventListener()。所有 DOM 節(jié)點(diǎn)中都包含這兩個方法既绩，并且它們都接受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ā)（因?yàn)樽詈笠粋€參數(shù)是 false）笆怠。與 DOM1 級方法一樣铝耻，這里添加的事件處理程序也是在其依附的元素的作用域中運(yùn)行。使用 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í)際上，第二個參數(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); // 有效冷守！
重寫后的這個例子沒有問題刀崖，是因?yàn)樵?addEventListener() 和 removeEventListener() 中使用了相同的函數(shù)。
大多數(shù)情況下拍摇，都是將事件處理程序添加到事件流的冒泡階段亮钦，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件到達(dá)目標(biāo)之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段充活。如果不是特別需要蜂莉，我們不建議在事件捕獲階段注冊事件處理程序。
-
IE事件處理程序
IE 實(shí)現(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)運(yùn)行副女；在使用 attachEvent() 方法的情況下，事件處理程序會在全局作用域中運(yùn)行蚣旱，因此 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()，就可以移除相應(yīng)的事件處理程序嫉你。
-
跨瀏覽器的事件處理程序
為了以跨瀏覽器的方式處理事件月帝，不少開發(fā)人員會使用能夠隔離瀏覽器差異的 JavaScript 庫，還有一些開發(fā)人員會自己開發(fā)最合適的事件處理的方法幽污。自己編寫代碼其實(shí)也不難嚷辅，只要恰當(dāng)?shù)厥褂媚芰z測即可。要保證處理事件的代碼能在大多數(shù)瀏覽器下一致地運(yùn)行距误，只需關(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 及更早版本中運(yùn)行，此時的事件類型必須加上 "on" 前綴沽讹。最后一種可能就是使用 DOM1 級方法（在現(xiàn)代瀏覽器中般卑，應(yīng)該不會執(zhí)行這里的代碼）。此時爽雄，我們使用的是方括號語法來將屬性名指定為事件處理程序蝠检，或者將屬性設(shè)置為 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)的信息订框。包括導(dǎo)致事件的元素析苫、事件的類型以及其他與特定事件相關(guān)的信息。例如穿扳，鼠標(biāo)操作導(dǎo)致的事件對象中衩侥，會包含鼠標(biāo)位置的信息，而鍵盤操作導(dǎo)致的事件對象中矛物，會包含與按下的鍵有關(guān)的信息茫死。所有瀏覽器都支持 event 對象，但支持方式不同履羞。
-
跨瀏覽器的事件對象*
雖然 DOM 和 IE 中的 event 對象不同峦萎，但基于它們之間的相似性依舊可以拿出跨瀏覽器的方案來。IE中 event 對象的全部信息和方法 DOM 對象中都有忆首，只不過實(shí)現(xiàn)方式不一樣爱榔。不過，這種對應(yīng)關(guān)系讓實(shí)現(xiàn)兩種事件模型之間的映射非常容易糙及〈牝剑可以對前面介紹的 EventUtil 對象加以增強(qiáng)，添加如下方法以求同存異丁鹉。
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;
}
}
};
