在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
1.DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论是DOM0还是DOM2级事件。而在通过 HTML 特性指定事件处理程序时，变量 event 中保存着 event 对象。
var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
alert(event.type); //"click"
};
btn.addEventListener("click", function (event) {
alert(event.type);//"click"
}, false);
HTML中：
event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。通用的成员如下：
- bubbles:只读，表明事件是否冒泡
- cancelable:只读，表明是否可以取消事件的默认行为
- currentTarget：只读，其事件处理程序当前正在处理事件的那个元素
- defaultPrevented：只读，为 true 表示已经调用了 preventDefault() (DOM3级事件中新增)
- detail：只读，与事件相关的细节信息
- eventPhase：只读，调用事件处理程序的阶段:1表示捕获阶段，2表
示“处于目标”，3表示冒泡阶段 - preventDefault（）：方法，只读，取消事件的默认行为。如果cancelable是true，则可以使用这个方法
- stopImmediatePropagation()：方法，只读，取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用(DOM3级事件中新增)
- stopPropagation()：方法，只读，取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法
- target：元素，只读，事件的目标
- trusted：只读，为true表示事件是浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增)
- type：只读，被触发的事件的类型
- view：AbstractView，只读，与事件关联的抽象视图。等同于发生事件的 window对象
①在事件处理程序内部，对象 this 始终等于 currentTarget 的值（即是事件注册到什么上什么就是currentTarget和this），而 target 则只包含事件的实际目标(实际发生事件的元素)。
document.body.onclick = function (event) {
console.log(event);
//true,因为事件是注册到body上的
console.log(event.currentTarget === document.body);
//实际点击了哪个元素，target就是哪个元素
console.log(event.target);
}
②需要通过一个函数处理多个事件时，可以使用 type 属性：
var btn = document.getElementById("myButton");
var handle = function (event) {
switch (event.type){
case "click":
console.log('点击事件');
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "orange";
break;
}
};
btn.onclick = handle;
btn.onmouseover = handle;
btn.onmouseout = handle;
③要阻止特定事件的默认行为，可以使用 preventDefault()方法：
html:
百度
js:
var myLink= document.getElementById("myLink");
myLink.onclick = function (event) {
//就取消默认的跳转到链接了
event.preventDefault();
}
只有 cancelable 属性设置为 true 的事件，才可以使用 preventDefault()来取消其默认行为。
④stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。
var btn = document.getElementById("myButton");
btn.onclick = function(event){
alert("Clicked");
//目前一次alert,如果没有调用这个方法，就会有两次的alert，
//分别是按钮的和body上的事件
event.stopPropagation();
};
document.body.onclick = function(event){
alert("Body clicked");
};
⑤事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。但尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2。
只有在事件处理程序执行期间，event 对象才会存在;一旦事件处理程序执行完成，event 对象就会被销毁。
2.IE中的事件对象
- 在使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个 属性存在。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
var event = window.event;
alert(event.type); //"click"
};
- 如果事件处理程序是使用 attachEvent()添加的，那 么就会有一个 event 对象作为参数被传入事件处理程序函数中：
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event)
{
alert(event.type); //"click"
});
//在像这样使用 attachEvent()的情况下，
//也可以通过 window 对象来访问 event 对象，
//就像使用 DOM0 级方法时一样，
//只是作为参数传递更方便而已。
- 如果是通过 HTML 特性指定的事件处理程序，那么还可以通过一个名叫 event 的变量来访问 event 对象(与 DOM 中的事件模型相同):
IE 的 event 对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的 DOM 属性和方法，所有事件对象都会包含下表所列的属性和方法：
- cancelBubble：读/写，默认值为false，但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法的作用相同)
- returnValue:读/写，默认值为true，但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同)
- srcElement，只读，事件的目标(与DOM中的target属性相同)
- type，只读，被触发的事件的类型
①因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为 this 会始终等于事件目标。故而，最好还是使用event.srcElement 比较保险。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//打印true,因为作用域是目标元素
alert(window.event.srcElement === this);
};
btn.attachEvent("onclick", function(event){
//打印false,因为作用域是全局作用域
alert(event.srcElement === this);
});
②将returnValue设置为false即可取消默认行为（与 DOM 不同的是，在此没有办法确定事件是否能被取消，因为没有对应的cancelable属性）：
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");
//效果与上面一样，只显示一次alert
window.event.cancelBubble = true;
};
document.body.onclick = function(){
alert("Body clicked");
};
3.跨浏览器的事件对象
拓展前面实现的EventUtil对象：
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;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
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;
}
},
stopPropagation:function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
注意：先使用 EventUtil.getEvent()取得 event 对象再操作其他的getTarget，preventDefault，preventDefault，stopPropagation等等。如：
document.addEventListener('click', function () {
console.log('点击-捕获到body');
}, true);
document.addEventListener('click', function () {
console.log('点击-冒泡到body');
}, false);
var btn = document.getElementById("myButton");
var clickHandle = function (event) {
//先getEvent
var e = EventUtil.getEvent(event);
//不会打印"点击-冒泡到body"了
EventUtil.stopPropagation(e);
console.log('点击-按钮');
};
EventUtil.addHandler(btn, 'click', clickHandle);