引言：在JavaScript中，當發生事件時，都會產生一個事件物件event ，這個物件中包含著所有與事件相關的資訊，包括髮生事件時DOM元素、事件的型別以及其他與特定事件相關的資訊。例如，因滑鼠移動發生事件時，事件物件中會包括滑鼠事件（橫、縱座標）等相關資訊；因操作鍵盤發生事件時，事件物件中會包括按下鍵的鍵值等相關資訊。

一、獲取事件物件

雖然所有瀏覽器都支援事件物件 event，但是不同的瀏覽器獲取事件物件的方式不同。在標瀏覽器中會將一個 event 物件直接傳入到事件處理程式中，而早期版本的IE瀏覽器(IE6~8)中，僅能通過window.event才能獲取事件物件。
接下來，以獲取 button 按鈕單擊事件的事件物件為例進行演示，示例程式碼如下。

<button id="btn">獲取 event物件</button>
<script>
var btn = document.getElementById('btn');
 btn.onclick=function(e){
var event = e || windows.event;
console.log(event);
};
</script>

上述第3行程式碼，根據 id 屬性值獲取 button 按鈕的元素物件。第 4~7 行程式碼，通過動態繫結式為按鈕新增單擊事件。其中，事件處理函式中傳遞的引數 e(引數名稱只要符合變數定義的規則即可)表示的就是事件物件 event，第5行通過“或”運算子實現不同瀏覽器間獲取事件象相容的處理。若是標準瀏覽器，則可以直接通過e獲取事件物件，否則若是早期版本的IE瀏覽器(IE6~8)則需要通過 window.event 才能獲取事件物件。

二、常用屬性和方法

在事件發生後，事件物件event中不僅包含著與特定事件相關的資訊，還會包含一些所有事件都有的屬性和方法。其中，常用的屬性和方法如下表

事件物件屬性方法 　　　　　　說明

e.target　　　　　　　　　　   返回觸發事件的物件 標準
e.type 　　　　　　　　　    　返回事件的型別 比如click mouseover 不帶on
e.stopPropagation() 　　　　    組織冒泡 標準
e.preventDefault() 　　　　   　該方法阻止預設事件（預設行為） 標準 比如禁止連結跳轉
e.srcElement 　　　　　　       返回觸發事件的物件 非標準 IE6-8使用
e.cancelBubble 　　　　          該屬性阻止冒泡 非標準 IE6-8使用
e.returnValue 　　　　　　     該方法阻止預設事件（預設行為） 非標準 IE6-8使用

(1)獲取觸發事件的元素
以獲取 button 按鈕的元素節點、id 值、class 值以及文字資訊為例，具體程式碼如下。

<button id-"btn" class-"btnClass">獲取 event 物件</button>
<script>
var btn = document.getElementById('btn');
 btn.onclick = function(e){
//處理相容問題:觸發此事件的元素物件
var obj = event.target ll window.event.srcElement;
console.log(obj.nodeName); //獲取元素節點名，如:BUTTON 
console.log(obj.id); // 獲取元素的 id 值，如:btn 
console.log(obj.className); // 獲取元素的 class 名，如:btnClass 
console.log(obj.innerText); // 獲取元素的文字值，如:獲取 event 物件 
};
</script>

從上述示例可以看出，通過事件物件的屬性 target 或srcElement即可獲取觸發事件的元素相關資訊，在專案中則可直接利用這些資訊進行相關的處理，以便於程式的開發。
(2)阻止事件冒泡

(2)阻止事件冒泡
事件冒泡是指，事件的響應像水泡一樣上升至最頂級物件，因此把這個過程稱之為“事件冒泡”。例如，為3個互相巢狀的<div>元素新增事件，並在控制檯輸出提示資訊，具體程式碼如下。

<div id="red">
<div id="green">
<div id="yellow"></div>
</div>
</div>
<script>
//分別獲取互相巢狀的div元素
var red=document.getElementById('red');
var green =document.getElementById('green');
var yellow=document.getElementById('yellow');
//分別為互相巢狀的div元素新增單擊事件
red.onclick = function(){ console.log('red');};
green.onclick = function() { console.log('green'); };
yellow.onclick = function() { console.log('yellow'); };
</script>

從上述程式碼可知，當單擊 id 為 red 的<div>時，則在控制檯輸出 red。同理，當用戶單擊不同顏色的<div>塊時，則在控制檯輸出對應的顏色值。這裡將最外層<div>的寬高設定為最大，內層的<div>設定為最小。