当一个HTML元素触发一个事件时，该事件会在元素结点与根结点之间的路径传播。传播按顺序分为三个阶段：捕获阶段、目标阶段、冒泡阶段，这个传播过程就是 DOM 事件流。
事件冒泡就是当一个HTML元素出发一个事件时，它的祖先节点都会收到该事件。
通过设置addEventListener的第三个参数可以决定事件是否在捕获阶段触发。通过event.stopPropagation()可以阻止事件冒泡。
一、定义
DOM结构是一个树型结构，当一个HTML元素触发一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为 DOM 事件流（DOM event flow ）。
点击查看W3C对事件流的定义，里面有事件在dom树上传播过程的图片。
传播（Propagation）按顺序分三个阶段（Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again）：
捕获阶段（capture phrase，从根节点window到目标节点，即最近的、最精确的元素节点）目标阶段（target phrase，目标节点上的事件触发按代码执行顺序触发）冒泡阶段（bubbling phrase，从目标节点到根节点 ）
二、演示
<div><button>点击</button></div>
现在有一个div节点，div节点里面有一个button节点。
let div = document.getElementsByTagName('div')[0];div.addEventListener('click',(e)=>{console.log('div')})let button = document.getElementsByTagName('button')[0];button.addEventListener('click',(e)=>{console.log('button')})
现在我们只看div节点和button节点，当我们点击button时会先后打印出button、div，因为addEventListener方法默认是让事件在冒泡阶段触发。如果我们设置addEventListener第三个参数useCapture的值为true，就会让事件在捕获阶段触发：
div.addEventListener('click',(e)=>{console.log('div')}，true)
或者
div.addEventListener('click',(e)=>{console.log('div')}，{capture: true})
这个时候点击button就会先触发div的click事件，再触发button的click事件。
三、停止传播：event.stopPropagation()
stopPropagation方法会让事件传播到目标阶段后停止传播，所以也叫阻止冒泡。相当于让事件流只剩下捕获阶段和目标阶段。所以下面的代码会先后打印出div1、button。
button.addEventListener('click',(e)=>{e.stopPropagation()console.log('button')})div.addEventListener('click',(e)=>{console.log('div1')}，true)div.addEventListener('click',(e)=>{console.log('div2')})
四、马上停止传播：event.stopImmediatePropagation();
有个特例，如果目标阶段的节点绑定了多个事件，它们不会区分捕获和冒泡，事件触发的顺序为代码执行的顺序。
而且event.stopPropagation()在目标阶段不会生效。如果目标阶段有 a、b、c 三个触发事件会按序执行，在 b 事件里设置event.stopPropagation()并不会影响 c 事件的触发。 但是如果在 b 事件里设置event.stopImmediatePropagation()后 ，事件触发到b之后就会停止触发后面的所有事件。
更多关于DOM事件模型，推荐看阮一峰的教程
