事件流
事件监听器是浏览器或者dom元素触发某个事件所执行的函数
由于dom树是层层嵌套的，当父元素和子元素同时注册了同一个事件，那么事件的执行顺序是怎样的，关于这个问题，微软和网景公司在第四代浏览器上给出了两个相反的方案——事件冒泡与事件捕捉。
事件冒泡
例如点击事件，当父子元素上同时注册了点击事件，先执行子元素当事件处理器，后执行父元素当事件处理器。
事件捕捉
例如点击事件，当父子元素上同时注册了点击事件，先执行父元素当事件处理器，后执行子元素当事件处理器。
DOM 2级规范统一事件流
两种事件流处理方案，导致了兼容性问题，为了解决这一问题，dom2级规范统一了事件流的过程，分为三个阶段：事件捕捉，在目标元素上，事件冒泡。这样我们可以在同一元素上注册事件捕捉和事件冒泡。
DOM2级规范为所有html元素添加了addEventListener()和removeEventListener()两个方法，
这两个方法都接受三个参数：事件名称，事件处理器函数，布尔值。其中第三个参数为true时，执行事件捕捉，为false时执行事件冒泡。默认为false。如下：
<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);
s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
//执行顺序是 "s1 捕获事件" => "s2 冒泡事件" => "s2 捕获事件" => "s1 冒泡事件"
</script>其中需要注意的是使用dom 0级规范为元素绑定事件时，只能绑定一个，绑定多个时前者会被后者覆盖，且只会执行冒泡。
参考地址
oakland.github.io/2016/06/14/…
