事件流的概念不复杂，却很容易误解。同样，如果你觉得自己掌握的清楚，可以尝试猜猜下面的几个例子的输出结果会是什么样。
事件流的两种模型
冒泡和捕获是事件流的两种模型
- 事件冒泡（event bubbling）是IE的提出的事件流
- 事件捕获（event capturing）是 Netscape Communicator提出的事件流。
其中目前浏览器采用的默认是冒泡型。
事件流包含三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段。
不论哪种事件模型包含着三个阶段，差异在于在什么阶段处理事件。
我们可以在事件的处理程序中，通过event.eventPhase来获取到处理程序所在的阶段：
- value=1 捕获阶段
- value=2 处于目标
- value=3 冒泡阶段
需要澄清的概念
我们假定DOM元素是层层包裹的洋葱，假定DOM结构为：
here is span content
加入点击了span元素，那么在捕获阶段事件的传递序列为：body -> div；在处于目标阶段，事件停留在span；在冒泡阶段，事件的传递序列为：div -> body。
我们在任意一个DOM上点击，比如点击span，或点击div但不点击到span，如果该DOM上有事件处理程序，event.eventPhase必然为2。
结论一：直接点击元素，并触发它上面的事件处理程序，eventPhase一定等于2。
我们能得到event.eventPhase不为2的结果，一定是点击元素 和 绑定了事件处理程序的不是同一个元素。
先来个简单的例子：
（1）定义了一个 button，在它上面绑定点击事件，直接点击它，事件处理程序获取到的 event.eventPhase 是 2
（2）按钮内部有一个，点击按钮中的i，事件处理程序获取到的 event.eventPhase 是 3
（3）如果通过addEventListener指定第三个参数为true，采用事件捕获的事件流，点击按钮中的i，事件处理程序获取到的 event.eventPhase 是1
在（2）中之所以输出为3，是因为事件在捕获、冒泡阶段都经过了div，但是在冒泡阶段才被处理；（3）则是在捕获阶段就被处理了。
结论二：在子元素上点击，触发父元素的点击事件，事件对象上的eventPhase为3；点击事件用捕获模型，则eventPhase为1
务必记住的一点是，eventPhase为2只属于直接点击的元素。
你完全懂了吗
拿下面的4个例子玩一玩，看你是否能理解输出结果。如下是页面的css和html结构。
1. 只在父元素上绑定点击事件
测试 #1 只在父元素上绑定点击事件
点击子元素H3 或 PRE：
DIV clicked, phase = 3
点击其他空白区域：
DIV clicked, phase = 2
按照结论二，点击h3或pre，自身没有事件处理，只会冒泡到div上，从而eventPhase输出为3。
按照结论一，点击div内的空白区域，相当于直接点击div元素，输出eventPhase为1。
2. 在父、子元素上都绑定点击事件
测试 #2 在父、子元素上都绑定点击事件
点击子元素H3：
H3 clicked, phase = 2
DIV clicked, phase = 3
点击子元素PRE
DIV clicked, phase = 3
点击非子元素的空白区域：
DIV clicked, phase = 2
相对上一个例子的唯一变化是，h3上也绑定了事件处理程序，这里唯一变化的是点击h3的时候的输出。
结合结论一、二，在h3点击时，先触发h3的eventPhase为2，然后再冒泡到div上eventPhase为3。
3. 捕获方式只在父元素上绑定点击事件
测试 #3 捕获方式只在父元素上绑定点击事件
点击子元素H3：
DIV clicked, phase = 1
点击非子元素的空白区域：
DIV clicked, phase = 2
代码跟例子一一样，只是捕获的方式从冒泡修改为了捕获。
根据结论二，点击h3的时候，早于事件到达h3，就在div被捕获了，输出为div eventPhase为1。
点击空白区域，则仍旧满足结论一。
自己曾经不能理解，虽然点击的是h3，但是点击先作用在洋葱的外层（div）上，为什么eventPhase不会是2，这里继续澄清：
eventPhase的值，在“真正”被点击的元素上是2，之前都是1，之后都是3。
4. 在父、子元素上绑定捕获型点击事件
测试 #4 捕获方式在父、字元素上都绑定点击事件
点击子元素H3：
DIV clicked, phase = 1
H3 clicked, phase = 2
点击非子元素的空白区域：
DIV clicked, phase = 2
根据结论二：点击h3的时候，会先在捕获阶段出发div eventPhase为1的输出，然后到达h3 eventPhase为2的输出。