在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

DOM 中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用的是何种方式（DOM0 级或 DOM2 级），都会传入 event 对象（当事件处理程序执行完毕，event 对象会被销毁）。
例如：

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

event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有的事件都会有下表列出的成员。

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

type

在需要通过一个函数处理多个事件时，可以使用 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( )

要阻止事件的默认行为，可以使用 preventDefault( ) 方法。例如，链接的默认行为就是在被单击时导航到其 href 特性指定的 URL。如果你想阻止链接导航这一默认行为，可以通过链接的 onclick 事件处理程序来取消它。（只用 cancelable 属性设置为 true 的事件，才能使用该方法）

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

stopPropagation( )

stopPropagation( ) 方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用 stopPropagation( ) ，从而避免触发注册在父级元素上的事件处理程序。

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

在上面的例子中，如果不添加 event.stopPropagation() ，会在单击按钮式弹出两个警示框。但是调用该方法后，click 事件不会传播到 document.body ，因此也不会触发第二个事件了。

eventPhase

事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。要注意的是，尽管“处于目标”发生在冒泡阶段，但 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
};

IE 中的事件对象

与访问 DOM 中的 event 对象不同，要访问 IE 中的 event 对象有几种不同的方式，取决于指定时间处理程序的方法。在使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。如果事件处理程序是使用 attachEvent( ) 添加的，那么就会有一个 event 对象作为参数被传入事件处理程序函数中。这种情况下也可以通过 window 对象访问 event 对象。
IE 的 event 对象同样也包含与创建它的事件相关的属性和方法。

跨浏览器的事件对象

虽然 DOM 和 IE 中的 event 对象不同，但基于他们之间的相似性依旧可以拿出跨浏览器的方案来。对之前的 EventUtil 对象加以增强：

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 = true;}},removeHandler: function(element, type, handler) {// ~~~},stopPropagation: function(event) {if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}}
};

getEvent( )

该方法返回对 event 的引用。考虑到 IE 中事件对象的位置不同，可以使用这个方法来取得 event 对象，而不必担心指定事件处理程序的方式。

getTarget( )

返回事件的目标。在这个方法内部，会检测 event 对象的 target 属性，如果存在则返回；不存在则返回 srcElement 属性的值。

preventDefault( )

用于取消事件的默认行为。传入 event 对象后，这个方法先检查是否存在 preventDefault( ) 方法，如果存在则调用该函数；否则，将 returnValue 设置为 false。

stopPropagation( )

该方法首先尝试使用 DOM 方法阻止事件流，否则就使用 cancelBubble 属性。