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