JavaScript 與 HTML 之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間?？梢允褂脗陕犉鳎ɑ蛱幚沓绦颍﹣眍A訂事件，以便事件發生時執行相應的代碼。這種在傳統軟件工程中被稱為 觀察員模式 的模型，支持頁面的行為（JavaScript 代碼）與頁面的外觀（HTML 和 CSS 代碼）之間的松散耦合。
一、事件流
事件流 描述的是 從頁面中接收事件的順序。
- IE 的事件流是 事件冒泡流，
- 而 Netscape Communicator 的事件流是 事件捕獲流。
1. 事件冒泡
IE 的事件流叫做 事件冒泡（event bubbling），即 事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播到較為不具體的節點（文檔）。以下面的 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> 元素上發生，而這個元素就是我們單擊的元素。然后，click 事件沿 DOM 樹向上傳播，在每一級節點上都會發生，直至傳播到 document 對象。圖 中展示了事件冒泡的過程。
所有現代瀏覽器都支持事件冒泡，但在具體實現上還是有一些差別。
- IE5.5 及更早版本中的事件冒泡會跳過
<html>元素（從<body>直接跳到document）。 - IE9、Firefox、Chrome 和 Safari 則將事件一直冒泡到
window對象。
2. 事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做 事件捕獲（event capturing）。事件捕獲的思想是 不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。
事件捕獲的用意在于在事件到達預定目標之前捕獲它。如果仍以前面的 HTML 頁面作為演示事件捕獲的例子，那么單擊 <div> 元素就會以下列順序觸發 click 事件：document、<html>、<body>、<div>
在事件捕獲過程中，document 對象首先接收到 click 事件，然后事件沿 DOM 樹依次向下，一直傳播到事件的實際目標，即 <div> 元素。圖展示了事件捕獲的過程。
在 DOM 事件流中，實際的目標（<div> 元素）在捕獲階段不會接收到事件。這意味著在捕獲階段，事件從 document 到 <html> 再到 <body> 后就停止了。下一個階段是“處于目標”階段，于是事件在 <div>上發生，并在事件處理（后面將會討論這個概念）中被看成冒泡階段的一部分。然后，冒泡階段發生，事件又傳播回文檔。
多數支持 DOM 事件流的瀏覽器都實現了一種特定的行為；即使 “DOM2 級事件” 規范明確要求捕獲階段不會涉及事件目標，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩個機會在目標對象上面操作事件。
二、 事件處理程序
事件就是用戶或瀏覽器自身執行的某種動作。諸如 click、load 和 mouseover，都是事件的名字。
而響應某個事件的函數就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以 on 開頭，因此 click 事件的事件處理程序就是 onclick，load 事件的事件處理程序就是 onload。為事件指定處理程序的方式有好幾種。
1. HTML事件處理程序
某個元素支持的每種事件，都可以使用一個與相應事件處理程序同名的 HTML 特性來指定。這個特性的值應該是能夠執行的 JavaScript 代碼。例如，要在按鈕被單擊時執行一些 JavaScript，可以像下面這樣編寫代碼：
<input type="button" value="Click Me" onclick="console.log('Clicked')" />
在 HTML 中定義的事件處理程序可以包含要執行的具體動作，也可以調用在頁面其他地方定義的腳本，如下面的例子所示：
<script type="text/javascript">
function showMessage(){
console.log("Hello world!");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
在這個例子中，單擊按鈕就會調用 showMessage() 函數。這個函數是在一個獨立的 <script> 元素中定義的，當然也可以被包含在一個外部文件中。事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼。
這樣指定事件處理程序具有一些獨到之處。首先，這樣會創建一個封裝著元素屬性值的函數。這個函數中有一個局部變量 event，也就是事件對象。
2. DOM0 級事件處理程序
通過 JavaScript 指定事件處理程序的傳統方式，就是 將一個函數賦值給一個事件處理程序屬性。這種為事件處理程序賦值的方法是在第四代 Web 瀏覽器中出現的，而且至今仍然為所有現代瀏覽器所支持。原因一是簡單，二是具有跨瀏覽器的優勢。要使用 JavaScript 指定事件處理程序，首先必須取得一個要操作的對象的引用。
每個元素（包括 window 和 document）都有自己的事件處理程序屬性，這些屬性通常全部小寫，例如 onclick。將這種屬性的值設置為一個函數，就可以指定事件處理程序，如下所示：
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log("Clicked");
};
在此，我們通過文檔對象取得了一個按鈕的引用，然后為它指定了 onclick 事件處理程序。但要注意，在這些代碼運行以前不會指定事件處理程序，因此如果這些代碼在頁面中位于按鈕后面，就有可能在一段時間內怎么單擊都沒有反應。
使用 DOM0 級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中的 this 引用當前元素。來看一個例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
console.log(this.id); // "myBtn"
};
單擊按鈕顯示的是元素的 ID，這個 ID 是通過 this.id 取得的。不僅僅是 ID，實際上可以在事件處理程序中通過 this 訪問元素的任何屬性和方法。以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。
也可以刪除通過 DOM0 級方法指定的事件處理程序，只要像下面這樣將事件處理程序屬性的值設置為 null 即可：
btn.onclick = null; // 刪除事件處理程序
將事件處理程序設置為 null 之后，再單擊按鈕將不會有任何動作發生。
3. DOM2 級事件處理程序
“DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener() 和removeEventListener()。
所有 DOM 節點中都包含這兩個方法，并且它們都接受 3 個參數：要處理的事件名、作為事件處理程序的函數 和 一個布爾值。
最后這個布爾值參數如果是 true，表示在捕獲階段調用事件處理程序；如果是 false，表示在冒泡階段調用事件處理程序。
要在按鈕上為 click 事件添加事件處理程序，可以使用下列代碼：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
上面的代碼為一個按鈕添加了 onclick 事件處理程序，而且該事件會在冒泡階段被觸發（因為最后一個參數是 false）。與 DOM0 級方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運行。使用 DOM2 級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
btn.addEventListener("click", function(){
console.log("Hello world!");
}, false);
這里為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照添加它們的順序觸發，因此首先會顯示元素的 ID，其次會顯示 "Hello world!" 消息。
通過 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 來移除；移除時傳入的參數與添加處理程序時使用的參數相同。這也意味著通過 addEventListener() 添加的匿名函數將無法移除，如下面的例子所示。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
console.log(this.id);
}, false);
//這里省略了其他代碼
btn.removeEventListener("click", function(){ // 沒有用！
console.log(this.id);
}, false);
在這個例子中，我們使用 addEventListener() 添加了一個事件處理程序。雖然調用 removeEventListener()
時看似使用了相同的參數，但實際上，第二個參數與傳入 addEventListener() 中的那一個是完全不同的函數。而傳入 removeEventListener() 中的事件處理程序函數必須與傳入 addEventListener() 中的相同，如下面的例子所示。
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//這里省略了其他代碼
btn.removeEventListener("click", handler, false); //有效！
重寫后的這個例子沒有問題，是因為在 addEventListener()和 removeEventListener()中使用了相同的函數。
大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件到達目標之前截獲它的時候將事件處理程序添加到捕獲階段。如果不是特別需要，我們不建議在事件捕獲階段注冊事件處理程序。
4. IE事件處理程序
IE 實現了與 DOM 中類似的兩個方法：attachEvent() 和 detachEvent()。這兩個方法接受相同的兩個參數：事件處理程序名稱與事件處理程序函數。由于 IE8 及更早版本只支持事件冒泡，所以通過 attachEvent() 添加的事件處理程序都會被添加到冒泡階段。
要使用 attachEvent() 為按鈕添加一個事件處理程序，可以使用以下代碼。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
注意，attachEvent()的第一個參數是"onclick"，而非 DOM 的 addEventListener()方法中的"click"。
在 IE 中使用 attachEvent()與使用 DOM0 級方法的主要區別在于事件處理程序的作用域。在使用 DOM0 級方法的情況下，事件處理程序會在其所屬元素的作用域內運行；在使用 attachEvent()方法的情況下，事件處理程序會在全局作用域中運行，因此 this 等于 window。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
在編寫跨瀏覽器的代碼時，牢記這一區別非常重要。
與 addEventListener()類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
btn.attachEvent("onclick", function(){
alert("Hello world!");
});
這里調用了兩次 attachEvent()，為同一個按鈕添加了兩個不同的事件處理程序。不過，與 DOM方法不同的是，這些事件處理程序不是以添加它們的順序執行，而是以相反的順序被觸發。單擊這個例子中的按鈕，首先看到的是"Hello world!"，然后才是"Clicked"。
使用 attachEvent()添加的事件可以通過 detachEvent()來移除，條件是必須提供相同的參數。與 DOM 方法一樣，這也意味著添加的匿名函數將不能被移除。不過，只要能夠將對相同函數的引用傳給 detachEvent()，就可以移除相應的事件處理程序。例如：
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
//這里省略了其他代碼
btn.detachEvent("onclick", handler);
這個例子將保存在變量 handler 中的函數作為事件處理程序。因此，后面的 detachEvent()可以使用相同的函數來移除事件處理程序。
5. 跨瀏覽器的事件處理程序
為了以跨瀏覽器的方式處理事件，不少開發人員會使用能夠隔離瀏覽器差異的 JavaScript 庫，還有一些開發人員會自己開發最合適的事件處理的方法。自己編寫代碼其實也不難，只要恰當地使用能力檢測即可。要保證處理事件的代碼能在大多數瀏覽器下一致地運行，只需關注冒泡階段。
第一個要創建的方法是 addHandler()，它的職責是視情況分別使用 DOM0 級方法、DOM2 級方法或 IE 方法來添加事件。這個方法屬于一個名叫 EventUtil 的對象，本書將使用這個對象來處理瀏覽器間的差異。addHandler()方法接受 3 個參數：要操作的元素、事件名稱和事件處理程序函數。
與 addHandler()對應的方法是 removeHandler()，它也接受相同的參數。這個方法的職責是移除之前添加的事件處理程序——無論該事件處理程序是采取什么方式添加到元素中的，如果其他方法無效，默認采用 DOM0 級方法。
EventUtil 的用法如下所示。
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 級方法，則使用該方法：傳入事件類型、事件處理程序函數和第三個參數 false（表示冒泡階段）。如果存在的是 IE 的方法，則采取第二種方案。注意，為了在 IE8 及更早版本中運行，此時的事件類型必須加上"on"前綴。最后一種可能就是使用 DOM0 級方法（在現代瀏覽器中，應該不會執行這里的代碼）。此時，我們使用的是方括號語法來將屬性名指定為事件處理程序，或者將屬性設置為 null。
可以像下面這樣使用 EventUtil 對象：
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//這里省略了其他代碼
EventUtil.removeHandler(btn, "click", handler);
addHandler()和 removeHandler()沒有考慮到所有的瀏覽器問題，例如在 IE 中的作用域問題。不過，使用它們添加和移除事件處理程序還是足夠了。此外還要注意，DOM0 級對每個事件只支持一個事件處理程序。好在，只支持 DOM0 級的瀏覽器已經沒有那么多了，因此這對你而言應該不是什么問題。
三、事件對象
在觸發 DOM 上的某個事件時，會產生一個事件對象 event，這個對象中包含著所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。例如，鼠標操作導致的事件對象中，會包含鼠標位置的信息，而鍵盤操作導致的事件對象中，會包含與按下的鍵有關的信息。所有瀏覽器都支持 event 對象，但支持方式不同。
1. DOM中的事件對象
兼容 DOM 的瀏覽器會將一個 event 對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法（DOM0 級或 DOM2 級），都會傳入 event 對象。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);
這個例子中的兩個事件處理程序都會彈出一個警告框，顯示由 event.type 屬性表示的事件類型。這個屬性始終都會包含被觸發的事件類型，例如 click（與傳入 addEventListener() 和 removeEventListener() 中的事件類型一致）。
在通過 HTML 特性指定事件處理程序時，變量 event 中保存著 event 對象。請看下面的例子。
<input type="button" value="Click Me" onclick="alert(event.type)"/>
以這種方式提供 event 對象，可以讓 HTML 特性事件處理程序與 JavaScript 函數執行相同的操作。
event 對象包含與創建它的特定事件有關的屬性和方法。觸發的事件類型不一樣，可用的屬性和方法也不一樣。不過，所有事件都會有下表列出的成員。
| 屬性/方法 | 類 型 | 讀/寫 | 說 明 |
|---|---|---|---|
| bubbles | Boolean | 只讀 | 表明事件是否冒泡 |
| cancelable | Boolean | 只讀 | 表明是否可以取消事件的默認行為 |
| currentTarget | Element | 只讀 | 其事件處理程序當前正在處理事件的那個元素 |
| defaultPrevented | Boolean | 只讀 | 為 true 表示已經調用了 preventDefault() （DOM3級事件中新增） |
| detail | Integer | 只讀 | 與事件相關的細節信息 |
| eventPhase | Integer | 只讀 | 調用事件處理程序的階段：1表示捕獲階段，2表示“處于目標”，3表示冒泡階段 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為。如果cancelable是true，則可以使用這個方法 |
| stopImmediatePropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增） |
| stopPropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡。如果bubbles為true，則可以使用這個方法 |
| target | Element | 只讀 | 事件的目標 |
| trusted | Boolean | 只讀 | 為true表示事件是瀏覽器生成的。為false表示事件是由開發人員通過 JavaScript 創建的（DOM3級事件中新增） |
| type | String | 只讀 | 被觸發的事件的類型 |
| view | AbstractView | 只讀 | 與事件關聯的抽象視圖。等同于發生事件的window對象 |
在事件處理程序內部，對象 this 始終等于 currentTarget 的值，而 target 則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則 this、currentTarget 和 target 包含相同的值。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.currentTarget === this); //true
alert(event.target === this); //true
};
這個例子檢測了 currentTarget 和 target 與 this 的值。由于 click 事件的目標是按鈕，因此這三個值是相等的。如果事件處理程序存在于按鈕的父節點中（例如 document.body），那么這些值是不相同的。再看下面的例子。
document.body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById("myBtn")); //true
};
當單擊這個例子中的按鈕時，this 和 currentTarget 都等于 document.body，因為事件處理程序是注冊到這個元素上的。然而，target 元素卻等于按鈕元素，因為它是 click 事件真正的目標。由于按鈕上并沒有注冊事件處理程序，結果 click 事件就冒泡到了 document.body，在那里事件才得到了處理。
在需要通過一個函數處理多個事件時，可以使用 type 屬性。例如：
var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
這個例子定義了一個名為 handler 的函數，用于處理 3 種事件：click、mouseover 和 mouseout。當單擊按鈕時，會出現一個與前面例子中一樣的警告框。當按鈕移動到按鈕上面時，背景顏色應該會變成紅色，而當鼠標移動出按鈕的范圍時，背景顏色應該會恢復為默認值。這里通過檢測 event.type屬性，讓函數能夠確定發生了什么事件，并執行相應的操作。
要阻止特定事件的默認行為，可以使用 preventDefault()方法。例如，鏈接的默認行為就是在被單擊時會導航到其 href 特性指定的 URL。如果你想阻止鏈接導航這一默認行為，那么通過鏈接的onclick 事件處理程序可以取消它，如下面的例子所示。
var link = document.getElementById("myLink");
link.onclick = function(event){
event.preventDefault();
};
只有 cancelable 屬性設置為 true 的事件，才可以使用 preventDefault()來取消其默認行為。
另外，stopPropagation()方法用于立即停止事件在 DOM 層次中的傳播，即取消進一步的事件捕獲或冒泡。例如，直接添加到一個按鈕的事件處理程序可以調用 stopPropagation()，從而避免觸發注冊在 document.body 上面的事件處理程序，如下面的例子所示。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert("Clicked");
event.stopPropagation();
};
document.body.onclick = function(event){
alert("Body clicked");
};
對于這個例子而言，如果不調用 stopPropagation()，就會在單擊按鈕時出現兩個警告框。可是，由于 click 事件根本不會傳播到 document.body，因此就不會觸發注冊在這個元素上的 onclick 事件處理程序。
事件對象的 eventPhase 屬性，可以用來確定事件當前正位于事件流的哪個階段。如果是在捕獲階段調用的事件處理程序，那么 eventPhase 等于 1；如果事件處理程序處于目標對象上，則 eventPhase等于 2；如果是在冒泡階段調用的事件處理程序，eventPhase 等于 3。這里要注意的是，盡管“處于目標”發生在冒泡階段，但 eventPhase 仍然一直等于 2。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.eventPhase); //2
};
document.body.addEventListener("click", function(event){
alert(event.eventPhase); //1
}, true);
document.body.onclick = function(event){
alert(event.eventPhase); //3
};
當單擊這個例子中的按鈕時，首先執行的事件處理程序是在捕獲階段觸發的添加到 document.body 中的那一個，結果會彈出一個警告框顯示表示 eventPhase 的 1。接著，會觸發在按鈕上注冊的事件處理程序，此時的 eventPhase 值為 2。最后一個被觸發的事件處理程序，是在冒泡階段執行的添加到 document.body 上的那一個，顯示 eventPhase 的值為 3。而當 eventPhase 等于 2 時，this、target 和 currentTarget 始終都是相等的。
2. IE中的事件對象
與訪問 DOM 中的 event 對象不同，要訪問 IE 中的 event 對象有幾種不同的方式，取決于指定事件處理程序的方法。在使用 DOM0 級方法添加事件處理程序時，event 對象作為 window 對象的一個屬性存在。來看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
var event = window.event;
alert(event.type); //"click"
};
在此，我們通過 window.event 取得了 event 對象，并檢測了被觸發事件的類型（IE 中的 type屬性與 DOM 中的 type 屬性是相同的）?？墒?，如果事件處理程序是使用 attachEvent()添加的，那么就會有一個 event 對象作為參數被傳入事件處理程序函數中，如下所示。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
alert(event.type); //"click"
});
在像這樣使用 attachEvent()的情況下，也可以通過 window 對象來訪問 event 對象，就像使用DOM0 級方法時一樣。不過為方便起見，同一個對象也會作為參數傳遞。
如果是通過HTML特性指定的事件處理程序，那么還可以通過一個名叫event的變量來訪問event對象（與 DOM 中的事件模型相同）。再看一個例子。
<input type="button" value="Click Me" onclick="alert(event.type)">
| 屬性/方法 | 類 型 | 讀/寫 | 說 明 |
|---|---|---|---|
| cancelBubble | Boolean | 讀/寫 | 默認值為false，但將其設置為true就可以取消事件冒泡（與DOM中的stopPropagation()方法的作用相同） |
| returnValue | Boolean | 讀/寫 | 默認值為true，但將其設置為false就可以取消事件的默認行為（與DOM中的preventDefault()方法的作用相同） |
| type | Element | 只讀 | 事件的目標（與DOM中的target屬性相同） |
| type | String | 只讀 | 被觸發的事件的類型 |
IE 的 event 對象同樣也包含與創建它的事件相關的屬性和方法。其中很多屬性和方法都有對應的或者相關的 DOM 屬性和方法。與 DOM 的 event 對象一樣，這些屬性和方法也會因為事件類型的不同而不同，但所有事件對象都會包含下表所列的屬性和方法。
| 屬性/方法 | 類 型 | 讀/寫 | 說 明 |
|---|---|---|---|
| cancelBubble | Boolean | 讀/寫 | 默認值為false，但將其設置為true就可以取消事件冒泡（與DOM中的stopPropagation()方法的作用相同） |
| returnValue | Boolean | 讀/寫 | 默認值為true，但將其設置為false就可以取消事件的默認行為（與DOM中的preventDefault()方法的作用相同） |
| type | Element | 只讀 | 事件的目標（與DOM中的target屬性相同） |
| type | String | 只讀 | 被觸發的事件的類型 |
因為事件處理程序的作用域是根據指定它的方式來確定的，所以不能認為 this 會始終等于事件目標。故而，最好還是使用 event.srcElement 比較保險。例如：
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(window.event.srcElement === this); //true
};
btn.attachEvent("onclick", function(event){
alert(event.srcElement === this); //false
});
在第一個事件處理程序中（使用 DOM0 級方法指定的），srcElement 屬性等于 this，但在第二個事件處理程序中，這兩者的值不相同。
如前所述，returnValue 屬性相當于 DOM 中的 preventDefault()方法，它們的作用都是取消給定事件的默認行為。只要將 returnValue 設置為 false，就可以阻止默認行為。來看下面的例子。
var link = document.getElementById("myLink");
link.onclick = function(){
window.event.returnValue = false;
};
這個例子在onclick事件處理程序中使用returnValue達到了阻止鏈接默認行為的目的。與DOM不同的是，在此沒有辦法確定事件是否能被取消。
相應地，cancelBubble 屬性與 DOM 中的 stopPropagation()方法作用相同，都是用來停止事件冒泡的。由于 IE 不支持事件捕獲，因而只能取消事件冒泡；但 stopPropagatioin()可以同時取消事件捕獲和冒泡。例如：
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function(){
alert("Body clicked");
};
通過在 onclick 事件處理程序中將 cancelBubble 設置為 true，就可阻止事件通過冒泡而觸發
document.body 中注冊的事件處理程序。結果，在單擊按鈕之后，只會顯示一個警告框。
四、事件類型
Web 瀏覽器中可能發生的事件有很多類型。如前所述，不同的事件類型具有不同的信息，而“DOM3
級事件”規定了以下幾類事件。
- UI（User Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發；
- 焦點事件，當元素獲得或失去焦點時觸發；
- 鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發；
- 滾輪事件，當使用鼠標滾輪（或類似設備）時觸發；
- 文本事件，當在文檔中輸入文本時觸發；
- 鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發；
- 合成事件，當為 IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；
- 變動（mutation）事件，當底層 DOM 結構發生變化時觸發。
- 變動名稱事件，當元素或屬性名變動時觸發。此類事件已經被廢棄，沒有任何瀏覽器實現它們，
因此本章不做介紹。
除了這幾類事件之外，HTML5 也定義了一組事件，而有些瀏覽器還會在 DOM 和 BOM 中實現其他
專有事件。這些專有的事件一般都是根據開發人員需求定制的，沒有什么規范，因此不同瀏覽器的實現
有可能不一致。
DOM3 級事件模塊在 DOM2 級事件模塊基礎上重新定義了這些事件，也添加了一些新事件。包括
IE9 在內的所有主流瀏覽器都支持 DOM2 級事件。IE9 也支持 DOM3 級事件。
參考
- 《JavaScript高級程序設計》
