DOM事件流
DOM事件流包括三个阶段：事件捕获阶段，处于目标阶段、事件冒泡阶段
addEventListener(type, listener[, options])
addEventListener(type, listener[, useCapture])
- options，{once表示值调用一次,capture事件是否在捕获阶段执行,passive表示是否调用preventDefault方法}，默认都是false
- useCapture，为布尔值，指定事件是否在捕获或冒泡阶段执行。默认为false，冒泡阶段路径元素的事件才会触发
事件委托
事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理。事件委托又称事件代理，事件委托就是利用事件冒泡
如上图，当点击son1后，得到结果如下
grandFather.addEventListener('click', function(e){ console.log('grandFather') }, false);
father1.addEventListener('click', function(e){ console.log('father1') }, false);
son1.addEventListener('click', function(e){ console.log('son1') }, false);
//son1
//father1
//grandFather
当把useCapture参数都改为true
xxx.addEventListener('click', function(e){ console.log('xxx') }, true);
//grandFather
//father1
//son1、
事件委托的应用
如果在需要有多个DOM事件需要监听的情况下，给每一个DOM都绑定监听函数，对性能会有极大的影响，因此，有一解决方案为事件委托。
- currentTarget：表示此事件绑定的元素
- target：通俗理解为表示触发一系列事件的源头
如上例子，点击son1，进入grandFather的监听函数，e.currentTarget就是grandFather元素，e.target就是son1 元素
了解冒泡与target后，不难可以想到若是在几百个dom监听之中，只需把监听函数绑定在父容器上即可，给div都绑定自定义的data-name属性，这样就可以非常容易得到目标元素内容
