JS事件冒泡和事件捕获

一、事件绑定

首先了解：

使用W3C标准的addEventListener和removeEventListener。

这2个函数是W3C标准规定的，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这2个函数。不过从IE9开始就支持了这2个标准的API。

addEventListener(type, listener, useCapture); 

// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown"; 而不像之前的attachEvent的事件名称,含"on",比如"onclick"、"onmouseover"、"onkeydown";

// listener:事件处理函数 

// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型

二、事件冒泡和事件捕获

事件冒泡和事件捕获很好理解，只不过是对同一件事情的不同看法，只不过这2种看法都很有道理。我们知道HTML中的元素是可以嵌套的，形成类似于树的层次关系。比如下面的代码：

need-to-insert-img

如果点击了最内侧的outC，那么外侧的outB和outC也被点击了！

1、如果浏览器采用的是事件冒泡，那么触发顺序是C-->B-->A，由内而外，像气泡一样，从水底浮向水面；

2、如果采用的是事件捕获，那么触发顺序是A-->B-->C，从上到下，像石头一样，从水面落入水底。

一般来说事件冒泡机制，用的更多一些，所以在IE8以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持

通过addEventListener((type, listener, useCapture)的useCapture来设定

useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。

再举个栗子：

need-to-insert-img

使用的是事件冒泡，当点击outC的时候，打印顺序是3-->2-->1。如果将false改成true使用事件捕获，打印顺序是1-->2-->3。

三、DOM事件流

//to do