概述
浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。如下例：
let div = document.getElementById('#div')
div.addEventListener('click',()=>{
console.log('div 被点击了')
})
我们通过addEventListener()给div添加监听事件，当用户点击div，则执行console.log('div 被点击了')。
事件捕获和事件冒泡
<div class='grandfather'>
<div class='father'>
<div class='son'>
文字
</div>
</div>
</div>
当我们给三个 div 同时绑定click事件，那么点击文字时，究竟是算点击了谁？
认为都点击了应该是符合直觉的，但是还得分个先后问题。
IE5 认为先调用子孙元素的事件函数，而网景认为先调用祖先元素的事件函数。
即：
-
从内向外找监听函数，叫事件冒泡（IE 5）
-
从外向内找监听函数，叫事件捕获（网景）
最终由 W3C 统一了标准，规定浏览器应该同时支持两种调用顺序。首先按事件捕获顺序看是否有函数监听，然后再按事件冒泡顺序看是否有函数监听，有监听函数就调用，没有就跳过。
选择哪一个事件流由开发者自行决定。
.addEventListener('click',fn,bool)
如果 bool 不传或为 falsy，就走冒泡阶段。
如果 bool 值为 true，就走捕获阶段。
