事件的发生会在元素节点之间以特定的顺序传播，这个过程就是 DOM 事件流
document ——> html ——> body ——> div，这个过程即为事件流的捕获阶段，反过来则为冒泡阶段，之前说的的事件侦听注册事件用到的第三个参数（ true / false ）就是用来捕获或者冒泡阶段的，如果参数为 true ，则说明在捕获阶段，如果为 false ，则说明在冒泡阶段（不写的话默认为 false）
捕获阶段：
如果参数为 true 则是捕获阶段，捕获阶段按照 document ——> html ——> body ——> div 的顺序执行，有父元素先进行父元素 再进行子元素，此代码中点击 son 盒子，先输出 document，再输出 father，后输出 son，与捕获事件流的顺序相同
<div class="father">
<div class="son"></div>
</div>
<script>
var son=document.querySelector('.son');
var father=document.querySelector('.father');
son.addEventListener('click',function(){
alert('son');
},true);
father.addEventListener('click',function(){
alert('father');
},true);
document.addEventListener('click',function(){
alert('document');
},true)
</script>
冒泡阶段：
如果参数为 false 则是冒泡阶段，冒泡阶段按照 div ——> body ——> html ——> document 的顺序执行，有子元素先进行子元素 再进行父元素，此代码中点击 son 盒子后先输出 son，再输出 father，再输出 document，与捕获阶段相反
<div class="father">
<div class="son"></div>
</div>
<script>
var son=document.querySelector('.son');
var father=document.querySelector('.father');
son.addEventListener('click',function(){
alert('son');
},false);
father.addEventListener('click',function(){
alert('father');
},false);
document.addEventListener('click',function(){
alert('document');
},false)
</script>
