在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含著所有與事件有關的信息：導致事件的元素、事件的類型、其他與特定事件相關的信息。
DOM中的事件對象
兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中，無論指定事件處理程序時使用什么方法（DOM0級或DOM2級），都會傳入event對象。如下：
var btn = document.getElementById("myBtn")
//DOM0
btn.onclick = function(event){
alert(event.type); //"click"
}
//DOM2
btn.addEventListener("click",function(event){
alert(event.type);//"click
},false);
event對象包含與創建它的特定事件有關的屬性和方法。出發的事件類型不一樣，可用的屬性和方法也不一樣。
- 在需要通過一個函數處理多個事件時，可以使用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;
- 要阻止特定事件的默認行為，可以使用preventDefault()方法。例如，鏈接的默認行為就是在被單擊時會導航到其href特性指定的URL。如果你想阻止鏈接導航這一默認行為，那么通過鏈接的onclick事件處理程序可以取消它。
var link=document.getElementById("myLink");
link.onclick=function(event){
event.preventDefault();
}
只有cancelable屬性設置為true的事件，才可以使用preventDefault()來取消其默認行為。
- stopPropagation()方法用于立即停止事件在DOM層次中的傳播，即取消進一步的事件捕獲或冒泡。
var btn=document.getElementById("myBtn");
btn.onclick=function(event){
alert("Clicked");
event.stopPropagation();//去掉該句會出現兩個警告框，先是clicked，再是Body clicked。
};
document.body.onclick=function(event){
alert("Body clicked");
};
對于這個例子而言，因為調用了stopPropagation(),所以在單價按鈕時click事件不會傳播到document.body。
- 事件對象的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上的那一個，顯示的值是3。當eventPhase的值為2時，this、target、和currentTarget始終是相等的。
IE中的事件對象
要訪問IE中的event對象，取決于指定事件處理程序的方法。
- 在使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在。
var btn=document.getElementById("myBtn");
btn.onclick=function(){
var event=widnow.event;
alert(event.type); //"click"
};
- 如果事件處理程序是使用attachEvent()添加的，那么就會有一個event對象作為參數被傳入事件處理程序函數中去。
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(event){
alert(event.type); //"click"
});
在像這樣使用attachEvent（）的情況下，也可以通過window對象來訪問event對象。
- 如果是通過HTML特性指定的事件處理程序，還可以通過一個名叫event的變量來訪問event對象，如下：
<input type="button" value="Click Me" onclick="alert(event.type)" >
IE事件對象會包含下表所列的屬性和方法
- 因為事件處理程序的作用域是根據指定它的方式來確定的，所以不能認為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
});
- returnValue屬性相當于DOM中的preventDefault()方法，它們的作用都是取消給定事件的默認行為。只要將returnValue設置為false，就可以阻止默認行為。
- cancelBubble屬性：
跨瀏覽器的事件對象：
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;
}
}，
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){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
} else if(element.detchaEvent){
element.detchaEvent("on"+type,handler);
} else{
element["on"+type]=null;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
使用方法：
