在觸發DOM上的某個事件時，會產生一個事件物件event。
DOM中的事件物件
相容DOM的瀏覽器會將一個event物件傳入到事件處理程序中。 event物件包含與建立它的特定事件有關的屬性和方法。除法的事件類型不一樣，可用的屬性方法就不一樣。不過，所有的事件都會有下表列出的成員。
下面列出了 2 級 DOM 事件標準定義的屬性：
下面列出了 2 級 DOM 事件標準定義的方法。 IE 的事件模型不支援這些方法：
this、target、currentTarget
在事件處理程序的內部，物件this總是等於currentTarget的值，而target則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則this、currentTarget和target包含相同的值。如：
var btn = document.querySelector("#btn");
btn.onclick=function () {
console.log(event.currentTarget === this); //true
console.log(event.target === this); //true
}由於click事件的目標是btn按鈕，所以這三個值是相等的。如果事件處理程序在按鈕的父節點（document.body）中，那麼這些值則不相同。如：
var btn = document.querySelector("#btn");
document.body.onclick=function () {
console.log(event.currentTarget === document.body); //true
console.log(this === document.body); //true
console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}
在這裡，this和currentTarget都是document.body，因為事件處理程序是註冊到這個元素上的。但是target元素卻等於按鈕元素，因為它才是click事件的真正目標。由於按鈕並沒有註冊事件處理程序，結果click事件就冒泡到了document.body，在那裡事件才能處理。
1、type
在需要透過一個函數處理多個事件時，可以使用type屬性。如：
//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
switch (event.type) {
case "click":
console.log("i click it");
break;
case "mouseover":
console.log("i enter it");
break;
case "mouseout":
console.log("i leave it");
break;
}
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
2、preventDefault()
要阻止特定事件的預設行為，可以使用該方法。如：
var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
var currentATag = aTags[i];
currentATag.onclick = function() {
event.preventDefault();
}
};
以上程式碼即封鎖了網頁上全部的a標籤超連結功能。要注意的是，只有cancelable屬性設定為true的事件，才可以使用preventDefault()來取消其預設行為。
3、stopPropagation()
立即停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡。例如，直接加入到一個按鈕的事件處理程序可以呼叫該方法，從而避免觸發註冊在document.body上面的事件處理程序。如：
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("btn clicked");
// event.stopPropagation();
};
window.onclick = function () {
console.log("clicked");
};
//单击一下的结果：
//btn clicked
//clicked
又如：
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("btn clicked");
event.stopPropagation();
};
window.onclick = function () {
console.log("clicked");
};
//单击一下的结果：
//btn clicked
eventPhase
此屬性用來決定事件目前正位於事件流的哪個階段。
如：
var btn = document.getElementById("btn");
document.body.addEventListener("click", function() {
console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段
btn.onclick = function() {
console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）
document.body.onclick = function() {
console.log("body" + event.eventPhase);
} //冒泡阶段（在body上）
又如：
var btn = document.getElementById("btn");
document.body.addEventListener("click", function() {
console.log(event.eventPhase); //1
console.log(event.currentTarget); //HTMLBodyElement
}, true);
btn.addEventListener("click", function() {
console.log(event.eventPhase); //2
console.log(event.currentTarget); //HTMLInputElement
});
document.body.addEventListener("click", function() {
console.log(event.eventPhase); //3
console.log(event.currentTarget); //HTMLBodyElement
});
流程大概是：
document.body 捕獲階段 --> btn 目標物件階段 --> document.body 冒泡階段
以上就是關於JavaScript事件對象，希望對大家的學習有所幫助。
