事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持event对象，但支持方式不同。
DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。
- bubbles: 返回布尔值，指示事件是否是起泡事件类型。
- cancelable: 返回布尔值，指示事件是否可拥可取消的默认动作。
- currentTarget: 返回其事件监听器触发该事件的元素。
- eventPhase: 返回事件传播的当前阶段。
- target: 返回触发此事件的元素（事件的目标节点）。
- type: 返回当前 Event 对象表示的事件的名称。
- initEvent(): 初始化新创建的 Event 对象的属性。
- preventDefault(): 通知浏览器不要执行与事件关联的默认动作。
- stopPropagation(): 不再派发事件。
this、currentTarget、target
在事件处理程序的内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert(event.currentTarget === this); //true
alert(event.target === this); //true
}
由于click事件的目标是btn按钮，所以这三个值是相等的。如果事件处理程序在按钮的父节点（document.body）中，那么这些值则不相同。如：
var body = document.body;
body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById('btn')); //true
}
在这里，this和currentTarget都是document.body，因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素，因为它是click事件的真正目标。由于按钮并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才能得到处理。
type
在需要通过一个函数处理多个事件时，可以使用type属性。如：
var btn = document.getElementById('btn');
//设置多个事件
var handler = function(event){
//获取事件的类型
switch(event.type){
case 'click':{
alert('click');
break;
}
case 'mouseover':{
event.target.style.backgroundColor = 'green';
break;
}
case 'mouseout':{
event.target.style.backgroundColor = 'gray';
break;
}
}
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
这里通过event.type属性，让函数能够确定发生了什么事件，并执行相应的操作。
preventDefault()
要阻止特定事件的默认行为，可以使用该方法。如：
var link = document.getElementById('link');
link.onclick = function(event){
event.preventDefault();
}
只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
stopPropagation()
stopPropagation()用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用该方法，从而避免触发注册在document.body上面的事件处理程序。如：
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert('click button');
event.stopPropagation();
}
document.body.onclick = function(event){
alert('click body');
}
//点击一下的结果是：
//click button
eventPhase
该属性用来确定事件当前正位于事件流的哪个阶段。
- 如果是捕获阶段则等于1；
- 如果是目标对象阶段则等于2；
- 如果是冒泡阶段则等于3；
var btn = document.getElementById('btn');
btn.onclick = function(event){
alert(event.eventPhase);
}
document.body.addEventListener('click',function(event){
alert(event.eventPhase);
},true)
document.body.onclick = function(event){
alert(event.eventPhase);
}
//点击一下的结果是：
//1
//2
//3
只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。
IE中的事件对象
与访问的DOM中的event对象不同，邀访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。
DOM0级方法
在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。如：
var btn = document.getElementById('btn');
btn.onclick = function(){
//获取event对象
var event = window.event;
alert(event.type); //'click"
}
IE事件处理程序
如果事件处理程序时使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序中。如下：
var btn = document.getElementById('btn');
btn.attachEvent("onclick",function(event){
alert(event.type);
})
HTML特性
通过HTML特性指定的事件处理程序，可以通过一个叫event的变量来访问event对象。如：
event对象也包含与创建它的事件相关的属性和方法。触发的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。
- cancelable: 返回布尔值，指示事件是否可拥可取消的默认动作。
- returnValue：取消事件的默认行为
- srcElement：事件的目标
- type: 返回当前 Event 对象表示的事件的名称。
srcElement
因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。故而，最好还是使用event.srcElement比较保险。比如：
var btn = document.getElementById('btn');
btn.onclick = function(){
alert(window.event.srcElement === this) //true
}
btn.attactEvent('onclick',function(event){
alert(event.srcElement === this); //false
})
returnValue
returnValue想当与DOM中的 preventDefault()方法，它们的作用都是取消给定事件的默认事件。只要将returnValue设置为false，就可以阻止默认行为。
var link = document.getElementById('link');
link.onclick = function(event){
window.event.returnValue = false;
}
与DOM不同的是，在此没办法确定事件是否被取消。
cancelBubble
cancelBubble属性和DOM中的stopPropagation()方法相同，都是用来停止事件冒泡的。由于IE不支持事件捕获，因此只能取消冒泡事件。
ar btn = document.getElementById('btn');
btn.onclick = function(event){
alert('click button');
window.event.cancelBubble = true;
}
document.body.onclick = function(event){
alert('click body');
}
//点击一下的结果是：
//‘click button
跨浏览器的事件对象
window.onload = function(){
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false)
}else if(element.addEvent){
element.attachEvent('on'+type,handler,false)
}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.addEventListener){
element.removeEventListener(type,handler,false)
}else if(element.addEvent){
element.detachEvent('on'+type,handler,false)
}else{
element['on'+type] = null;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
}
var btn = document.getElementById('btn');
btn.onclick = function(event){
event = EventUtil.getEvent(event);
alert(event);
}
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
alert(target);
}
}