JavaScript事件

事件流
先来看一个例子 http://runjs.cn/detail/nj53vksj
点击蓝色的div，会依次弹出div,document,window，也就是说单击页面中一个元素时并不是只触发了该元素的事件，而是这个元素的所有父亲元素都会触发该事件。这就是事件流。
事件流描述的是从页面中接收事件的顺序。但是不是所有浏览器的事件流机制都是一样的，IE的事件流叫做事件冒泡，而其他的浏览器不仅支持事件冒泡还支持事件捕获。

事件冒泡
事件冒泡即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点。就如刚才的例子。

事件捕获
事件捕获可以说是和冒泡是相反的过程。即事件开始时由不太具体的元素接收，而最具体的节点应该最后接收到事件。

下面这张图展示了事件冒泡和事件捕获的的过程：

DOM事件流
DOM2级事件规定事件流包含三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

肯定有人会问：IE只支持事件冒泡，但是为什么我用chrome，例子中也是冒泡的结果。
这是因为在设置元素的事件处理程序时用了onclick这种方式（DOM0级），已这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

事件处理程序
除了像刚才那样指定事件处理程序，"DOM2级事件"定义了两个方法，用于指定和删除事件处理程序：
addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。

例如要在按钮上为click事件添加事件处理程序，可以使用下面的方法：
var btn = document.getElementById('myBtn');
btn.addEventListener('click', function(){
    alert(this.id);
});

这个事件会在冒泡阶段被触发（因为最后一个参数是false）。与DOM0级方法一样，这里添加的事件处理程序也是在该元素的作用域中执行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。添加多个的话是按照添加的顺序一次执行。

可以使用remoreEventListener()来移除，参数和添加时相同，这就意味着使用匿名函数无法移除。

通常都是将事件处理程序添加到事件流的冒泡阶段，可以兼容各种浏览器。

IE事件处理程序
ie实现了和DOM中类似的方法：attachEvent()和detachEvent()。它们接受相同的两个参数：事件处理程序名称和事件处理程序函数。另ie只支持事件冒泡。例如上面的例子在ie中可以这样写：

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
    alert(this === window);  // true
});

不同的是attachEvent的第一个参数是onclick，而非DOM事件中的click。另外一个非常重要的区别就是：DOM事件处理程序函数的作用域是所属元素，而使用attachEvent事件处理程序会在全局作用域中执行，因此this等于window。最后要说明的是attachEvent添加的事件处理程序执行的顺序和DOM的方式截然相反。

事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

DOM中的事件对象
DOM事件处理程序都会传入一个event对象，event对象通用的属性有：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1捕获 2 处于目标 3冒泡
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡。如果bubbles为true
target	Element	只读	事件的目标
type	String	只读	被触发的事件的类型
view	AbstactView	只读	与事件关联的抽象视图。等同于发生事件的window对象

IE事件对象