事件流

事件捕获

DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
DOM标准规定事件流包括三个阶段：
（1）事件捕获阶段
（2）处于目标阶段
（3）事件冒泡阶段
首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数， 它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

element.addEventListener(event, function, useCapture)
                

event：字符串，指定事件名。（不要使用 "on " 前缀。 例如，使用 "click " ,而不是使用 "onclick "。）
function：指定要事件触发时执行的函数。
useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。(true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行)

IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

 element.attachEvent("onclick ", doSomething2);
                    

addEventListener允许在同一个元素上添加多个事件处理程序，如下所示：

结果：先输出“Div”，再输出“myDiv-false”，最后输出“myDiv-true”。

在目标对象上同时绑定捕获阶段/冒泡阶段事件处理程序，触发目标对象时属于DOM事件流中的目标阶段。

目标阶段事件的执行顺序：先注册的先执行，后注册的后执行。也就是说，在目标对象上绑定的函数是采用捕获，还是采用冒泡，都没有什么关系，因为冒泡和捕获只是对父元素上的函数执行顺序有影响，对自己没有什么影响。

如何阻止事件冒泡？

默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。
IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播；
IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。

结果：先输出“Div1-true”，再输出“Div3-true”，最后输出“Div3-false”。不会输出“Div1-false”

因为当事件传播到Div3上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。