事件流：
概念：事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
注意：捕获基本不用，多用冒泡
捕获或者冒泡：
DOM.addEventListener(事件类型， 事件处理函数， 是否使用捕获机制)
addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定，当第三个参数为false或者为空的时候，代表在冒泡阶段绑定。
阻止事件流动：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
事件对象.stopPropagation()
阻止默认行为：比如链接点击不跳转，表单域的不提交
e.preventDefault()
事件委托：
概念：事件委托是利用事件流的特征解决一些开发需求的知识技巧
e.target 指触发事件的元素
e.currentTarget 指绑定事件的元素
案例：
<body> <div id="a"> <div id="b"> <div id="c"> <div id="d"></div> </div> </div> </div> <script> document.getElementById('a').addEventListener('click', function ( e ) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('b').addEventListener('click', function ( e ) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('c').addEventListener('click', function ( e ) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); document.getElementById('d').addEventListener('click', function ( e ) { console.log('target:' + e.target.id + '¤tTarget:' + e.currentTarget.id); }); </script> </body>
处于冒泡阶段
//点击d元素的时候； target:d¤tTarget:d // d触发 target:d¤tTarget:c // c触发 target:d¤tTarget:b // b触发 target:d¤tTarget:a // a触发
理解：由输出可知，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。
将上述<script>标签里的事件绑定的第三个参数设置为true时，事件处于捕获阶段，然后还是点击最里层的元素d，这时event.target还依旧会指向d，因为那是引起事件触发的元素，因为event.currentTaget指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下：
处于捕获阶段
target:d¤tTarget:a // a触发 target:d¤tTarget:b // b触发 target:d¤tTarget:c // c触发 target:d¤tTarget:d // d触发
案例参考：currentTarget VS target - 掘金
搞懂之后刷道面试题吧！
事件委托_牛客题霸_牛客网
总结：
事件流：
事件完整执行过程中的流动路径，它主要有事件捕获和冒泡两个阶段，我们可以在addEventListener的第三个参数中设定是否采取事件冒泡或者捕获，默认或者填true为冒泡，false为捕获，其中冒泡更常用，它是指元素嵌套时，从子向父依次触发同名事件，而捕获则是从父向子触发。
事件委托原理是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
事件捕获：
我们一般采用 e.target 与 e.currentTarget 来进行事件委托，其中前者指事件触发的元素，后者指事件绑定的元素。
