JavaScript事件对象

1、DOM中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或 DOM2 级），都会传入 event 对象。

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

（1）type：获取事件类型

（2）target：获取事件目标

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

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

这个例子检测了 currentTarget 和 target 与 this 的值。由于 click 事件的目标是按钮，因此这三个值是相等的。

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

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

当单击这个例子中的按钮时， this 和 currentTarget 都等于 document.body ，因为事件处理程序是注册到这个元素上的。然而， target 元素却等于按钮元素，因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body ，在那里事件才得到
了处理。

（3）stopPropagation()：阻止事件冒泡

（4）preventDefault()：取消事件的默认行为

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

2、IE中的事件对象

（1）type：获取事件类型

（2）srcElement：获取事件目标

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为 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
});

在第一个事件处理程序中（使用 DOM0 级方法指定的）， srcElement 属性等于 this ，但在第二个事件处理程序中，这两者的值不相同。

 

（3）cancelBubble：阻止事件冒泡的属性

（4）returnValue：取消事件的默认行为的属性

returnValue 属性相当于 DOM中的 preventDefault() 方法，它们的作用都是取消给定事件的默认行为。只要将 returnValue 设置为 false ，就可以阻止默认行为。

var link = document.getElementById("myLink");
link.onclick = function(){
window.event.returnValue = false;
};

cancelBubble 属性与 DOM 中的 stopPropagation() 方法作用相同，都是用来停止事件冒泡的。由于 IE 不支持事件捕获，因而只能取消事件冒泡；但 stopPropagatioin() 可以同时取消事件捕获和冒泡。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function(){
alert("Body clicked");
}; 

3、跨浏览器的事件对象

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 (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};

window.event：IE8以及以下获取event对象。