捕获和冒泡
一个完整的DOM事件流2.0包含三个阶段
- 捕获阶段：事件从Document节点自上而下向目标节点传播的阶段，至目标元素父元素为捕获阶段
- 目标阶段：真正的目标节点正在处理事件的阶段
- 冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段
eg：当点击一个元素A触发click时，该事件会先进入捕获阶段，从顶层即document开始向下传播，一直到目标元素A进入目标阶段，目标阶段结束后，事件会进入冒泡阶段，直到document停止。
即捕获阶段由外向内，冒泡阶段由内向外。如下图
举例
<div class="grandpa">我是爷
<div class="father">我是爹
<div class="son">我是儿</div>
</div>
</div>
<script>
document.querySelector('.grandpa').onclick = function () {
console.log('我是爷')
}
document.querySelector('.father').onclick = function (e) {
console.log('我是爹')
}
document.querySelector('.son').onclick = function () {
console.log('我是儿')
}
</script>
当点击son元素时，控制台输出如下
当点击
.son时，捕获阶段依次经过ducument/html/body/.grandpa/.father；然后触发.son绑定事件，进入目标阶段，执行完目标阶段后，再从.father依次进入冒泡阶段。
阻止冒泡
点击son时，不想触发father和grandpa绑定的事件，则需要阻止事件冒泡，修改son的click事件
document.querySelector('.son').onclick = function ($e) {
// 不考虑兼容 >=ie9，直接调用stopPropagation
// $e.stopPropagation();
// 兼容写法
$e = window.event || $e;
if (document.all) { //只有ie识别
$e.cancelBubble = true;
} else {
$e.stopPropagation();
}
console.log('我是儿')
}
此时点击son时，只会输出【我是儿】，而不会触发father和grandpa的点击事件。
事件冒泡不仅可以被阻断，也可以改变触发阶段。
注册监听事件
上面演示的click事件绑定，通过ele.onclick=fn进行绑定，只适合处理简单场景，假设要在统一元素绑定多个click事件时，后赋值函数会覆盖前面赋值的函数。可使用ele.addEventListener(type,listener)绑定多个事件。(注:<=IE8的浏览器需要通过ele.attachEvent注册监听事件)
在之前的js中添加代码
var father= document.querySelector('.son')
son.addEventListener("click", function(){
console.log("son1")
},false)
father.addEventListener("click", function(){
console.log("son2")
},false)
点击son输出结果
addEventListener按照注册顺序执行，通过ele.onclick=fn绑定的函数，也是按照注册顺序执行
addEventListener第三个参数可以改变事件触发阶段，默认为false，冒泡阶段触发。可以直接赋boolean值，也可以是对象，修改多个属性。
注:IE9-IE11仅支持第一种，edge两种都支持
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, opts]);
-
type表示监听事件类型的字符串。 -
listener当所监听的事件类型触发时，会接收到一个事件通知。listener必须是一个实现了EventListener接口的对象，或者是一个函数 -
useCapture可选参数，默认为false，表示是否在捕获阶段 -
opts可选参数，包含三个参数
{
capture:false， //表示是否在捕获阶段，捕获阶段触发
once:false, //表示是否执行一次，设置为true则只会执行一次
passive:false // 表示是否顺从模式
}
- 第三个参数为boolean值，若修改该值为true，事件将会在捕获阶段触发
点击<div class="grandpa">我是爷 <div class="father">我是爹 <div class="son">我是儿</div> </div> </div> <script> document.querySelector('.grandpa').addEventListener('click', function () { console.log('我是爷') }, false) document.querySelector('.father').addEventListener('click', function () { console.log('我是爹') }, true) // 修改参数 document.querySelector('.son').addEventListener('click', function () { console.log('我是儿') }, false) </script>son，输出如下
useCapture
father的绑定监听事件，优先执行了，也就是在捕获阶段执行，而非在冒泡阶段执行。 - 第二种参数为一个配置对象，capture和once好理解，单独说下passive
一个很重要的使用场景，在移动端，通常会监听touchstart事件，但是，由于浏览器不能预先预知是否阻拦了默认事件，只能预处理一次监听事件，检查是否执行了e.preventDefault()，这个过程消耗资源，会导致滚动出现卡顿现象。
当设置passive:true时，表示该监听函数为顺从模式，不会阻拦默认事件，浏览器只需要解析opts而非预处理监听事件，不会浪费资源，进而优化了卡顿。当设置passvie:true时，使用e.preventDefault()会失效，且控制台会有错误提醒
判断是否支持passive
var passiveSupported = false;
try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
}
});
window.addEventListener("test-passive", null, options);
} catch(err) {}
移除事件监听
target.removeEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, opts]);
必备三要素：【类型】【监听器】【是否捕获阶段触发】
移除事件监听时，需要一一对应，如果userCapture为true，对应的移除时也必须为true 。因为这个监听器也有可能还注册在了冒泡阶段，那样的话，同一个监听器实际上对应着两个监听器对象（通过 getEventListeners() 可看到）
所以，设置passive和once并不需要一一对应，如果没有设置capture，则可以省略第三个参数。
