JavaScript事件对象

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

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
defaultPrevented	Boolean	只读	为 true 表示已经调用了 preventDefault( ) （DOM3 新增）
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1 表示捕获阶段，2 表示“处于目标”，3 表示冒泡阶段
preventDefault( )	Function	只读	取消事件的默认行为。如果 cancelable 是 true，则可以使用这个方法
stopImmediatePropagation( )	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3 新增）
stopPropagation( )	Function	只读	取消事件的进一步捕获或冒泡。如果 bubbles 为 true，则可以使用这个方法
target	Element	只读	事件的目标
trusted	Boolean	只读	为 true 表示事件是浏览器生成的。false 表示事件是由开发人员通过 JavaScript 创建的（DOM3 新增）
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象试图。等同于发生时间的 window 对象

在事件处理程序内部，对象 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 对象同样也包含与创建它的事件相关的属性和方法。

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认值是 false ，如果设置为 true 就可以取消事件冒泡（与 DOM 中的 stopPropagation( ) 方法的作用相同）
returnValue	Boolean	读/写	默认值是 true，如果设置为 false 就可以取消事件的默认行为（与 DOM 中的 preventDefault( ) 方法的作用相同）
srcElement	Element	只读	事件的目标（与 DOM 中的 target 属性相同）
type	String	只读	被触发的事件的类型

---

跨浏览器的事件对象

虽然 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 属性。