事件流动（Event Flow）：
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。所以说，DOM事件不单单只会在一个Element上触发，它还会流向其他Element。事件的流动通常会经历这么三个阶段；
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流：事件的传播的英文从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
过程（Process）：
事件通过DOM树传播。应用程序可以使用该dispatchEvent()方法调度事件对象，并且事件对象将通过DOM事件流确定的DOM树传播。
事件对象被分派到事件目标。但是在发送开始之前，必须首先确定事件对象的传播路径。传播路径是的有序列表的当前事件的目标，通过该事件传递。该传播路径反映了文档的分层树结构。列表中的最后一项是事件目标，列表中的前面项目称为目标的祖先，前面的项目作为目标的父项。一旦确定了传播路径，事件对象就会经过一个或多个事件阶段。有三个事件阶段：捕获阶段，目标阶段和泡沫阶段。事件对象完成这些阶段，如下所述。如果不支持某个阶段，或者事件对象的传播已停止，则将跳过该阶段。例如，如果bubbles属性设置为false，则将跳过气泡阶段，如果stopPropagation()在分派之前调用，则将跳过所有阶段。
1.捕获阶段（capture phase）
定义：事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。
捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。
2.目标阶段（target phase）
定义：事件对象到达事件目标。
3。冒泡阶段（bubble phase）
定义：事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）。
冒泡阶段发生在最后，这也是我们最为熟悉的一个阶段。在这阶段里事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒。
方法（Method）：
语法：
element.addEventListener(event, function, useCapture)
event 必需。描述事件名称的字符串。注意： 不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
function 必需。描述了事件触发后执行的函数。 当事件触发时，事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。可能值：true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
应用（Applications）：(转载自：https://blog.csdn.net/qq_30100043/article/details/77186811 )
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 #wrap { 10 width: 200px; 11 height: 200px; 12 background: orange; 13 } 14 #outer { 15 position: relative; 16 top: 50px; 17 left: 50px; 18 width: 100px; 19 height: 100px; 20 background: #eeddff; 21 } 22 #inner { 23 position: relative; 24 top: 25px; 25 left:25px; 26 width: 50px; 27 height: 50px; 28 background: #44ddff; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="wrap"> 34 <div id="outer"> 35 <div id="inner"></div> 36 </div> 37 </div> 38 </body> 39 <script> 40 var wrap = document.getElementById('wrap'); 41 var outer = document.getElementById('outer'); 42 var inner = document.getElementById('inner'); 43 44 wrap.addEventListener('click',function(){ 45 alert('789'); 46 },false); 47 outer.addEventListener('click',function(){ 48 alert('456'); 49 },false); 50 inner.addEventListener('click',function(){ 51 alert('123'); 52 },false); 53 inner.addEventListener('click',function(){ 54 alert('inner'); 55 },true); 56 wrap.addEventListener('click',function(){ 57 alert('wrap'); 58 },true); 59 outer.addEventListener('click',function(){ 60 alert('outer'); 61 },true); 62 </script> 63 </html>
以上代码摘自https://segmentfault.com/a/1190000003497939）
点击查看此案例，我们会发现，首先是触发的是捕获阶段的事件，然后再触发的是冒泡阶段的事件。
我们会发现inner的dom对象上绑定的两个事件，是先弹出的123，然后又弹出的inner。这个是为什么呢？
这是因为如果当前的dom对象已经处于当前点击位置的最底部了（重点是这里最底部，如果没有到最底部，还是和外部的两个一样的）。就是说如果这个dom对象是捕获的终点也是冒泡的起点，它就不区分冒泡捕获了，只是纯粹的绑定了两个dom事件，所以，这两个事件就是看谁先绑定的靠前，谁就先实行。。。
（注：以上内容均来源于网上，基本转自：http://www.cnblogs.com/liuwei-0313/p/9935779.html）