JavaScript中的事件：事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event事件，但支持方式不同。

一、DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入事件处理程序中，无论使用DOM0级或DOM2级。

event对象包含的部分属性或方法如下：

bubbles:表明事件是否冒泡。

cancelable:表明是否可以取消事件的默认行为。

currentTarget:其事件处理程序当前正在处理事件的那个元素。

defaulPrevented:为true表明已调用preventDefaul()。

eventPhase:调用事件处理程序的阶段。1为捕获，2为“处于目标”，3为冒泡。

preventDefaul():取消事件的默认行为。cancelable为true可用。

stopImmediatePropagation():取消事件的进一步捕获或冒泡。同时阻止任何事件处理程序被调用。

stopPropagation():取消事件的进一步捕获或冒泡。bubbles为true可用。

target:事件目标

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则这三者的值相同。如：

var btn=document.getElementById("myBtn");
btn.onclick=function(event){
alert(event.currentTarget===this);        //true
alert(event.target===this);               //true
};

如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。如：

document.body.onclick=function(event){
alert(event.currentTarget===document.body);       //true
alert(this===document.body);                                 //true
alert(event.target===document.getElementById(myBtn);　　//true
};

上面的代码中，target元素等于按钮元素，是因为它是click事件的真正目标。由于按钮上事件处理程序，所以冒泡到document.body处理。

注意event对象只有在事件处理程序执行期间才存在，程序执行完就会被销毁。

二、IE中的事件对象

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。

使用DOM0级时：event对象作为window对象的一个属性存在。

使用attachEvent()时：event对象作为参数传入事件处理程序函数中(同时也可以通过window对象来访问event对象，与DOM0级一样）。

看下面例子：

//DOM0级
var btn=document.getElementById("myBtn");
btn.onclick=function(){
var event=window.event;
alert(event.type);        //"click"
};

//attachEvent()
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(event){
alert(event.type);        //"click"
});

IE的event对象包含的部分属性方法如下：

cancelBubble:默认值为false，将其设为true就可以取消事件冒泡（与DOM中的stopPropagation()方法一样）。　　

returnValue:默认值为true，将其设为false就可以取消事件的默认行为（与DOM中的preventDefault()方法一样）。

srcElement:事件的目标（与DOM中的target属性相同）。

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。因此还是使用event.srcElement比较好。

三、跨浏览器的事件对象

var EventUtil={
addHandler:function(element,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){
//代码
},
stopPropagation:function(event){
if(eventstopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};

btn.onclick=function(event){
event=EventUtil.getEvent(event);
};

以上代码，在兼容DOM的浏览器中，event变量只是简单地传入和返回。而在IE中，event参数是未定义的，因此就会返回window.event。将这一行代码添加到事件处理程序的开头，就可以确保随时都能使用event对象，而不用担心用户使用什么浏览器。

四、事件处理程序的作用域

在兼容DOM的浏览器中，事件处理程序中的this指向元素本身；

在IE中，使用DOM0级方法，this指向元素本身；而使用attachEvent()，则this===window。