JavaScript和HTML之间的交互是通过事件来实现的。事件流描述的是从页面中接收事件的顺序。
IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流，而DOM的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
事件冒泡是指事件开始时是由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）；
事件捕获是指由不太具体的节点先接收到事件，而最具体的节点应该最后接收到事件。
事件捕获和事件冒泡
DOM事件和IE事件的区别
| DOM | IE | |
|---|---|---|
| 添加事件 | addEventListener(type, handler, false/true) | attachEvent('on'+type, handler) |
| 移除事件 | removeEventListener(type, handler, false/true) | detachEvent('on'+type, handler) |
| event对象 | event = event | event = window.event |
| 事件的目标 | event.target | event.srcElement |
| 取消事件默认行为 | event.preventDefault() | event.returnValue = false |
| 取消冒泡 | event.stopPropagation() | event.cancelBubble = true |
基于DOM和IE事件的区别，可以得到一个跨浏览器的事件处理程序：
var EventUtil = {
// 绑定事件
addHandler: function(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attchEvent) {
element.attachEvent('on'+type, handler);
} else {
element['on'+type] = handler;
}
},
// 获取event对象
getEvent: function(event) {
return event ? event : document.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) {
if(element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
element.detachEvent('on'+type, handler);
} else {
element['on'+type] = null;
}
},
// 取消事件冒泡
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
