在触发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;
}
}
};
使用方法：
