关于事件捕获，事件冒泡以及事件委托

ps.不谈兼容性

现代浏览器中事件是以从上到下然后从下再返回到上的，从上到下的过程叫做事件捕获，从下到上的过程叫做事件冒泡。

想要指定在哪个阶段触发指定函数，需要在addEventener函数中添加第三个参数，它是一个Boolean值。

true时为在捕获阶段触发回调，false时在冒泡阶段触发回调，默认值为false。

//html
   <div class="wapper">
        <div class="child">
            ABCDEF
        </div>
    </div>

//js
      var wapper=document.querySelector('.wapper'),child=document.querySelector('.child');
       window.addEventListener('click',(e)=>{
           console.log('window 捕获');
       },true)
       window.addEventListener('click',(e)=>{
           console.log('window 冒泡');
       },false)
       document.addEventListener('click',(e)=>{
           console.log('document 捕获');
       },true)
       document.addEventListener('click',(e)=>{
           console.log('document 冒泡');
       },false)
       wapper.addEventListener('click',(e)=>{
           console.log('wapper 捕获');
       },true)
       wapper.addEventListener('click',(e)=>{
           console.log('wapper 冒泡');
       },false)
       child.addEventListener('click',(e)=>{
           console.log('child 捕获');
       },true)
       child.addEventListener('click',(e)=>{
           console.log('child 冒泡');
       },false)

输出：
       window 捕获
       document 捕获
       wapper 捕获
       child 捕获
       child 冒泡
       wapper 冒泡
       document 冒泡

事件传递的过程就像是在玩弹力球，扔下去依次碰到挡板，弹回来时再次碰到挡板，在事件函数中触发stopPropagation()就像是给挡板加上强力胶，让弹力球停在那里不能上也不能下。原本你打算接到球以后就把它放到口袋里，但是在函数中触发preventDefault()就像是让你接到球以后什么也不做。

stopPropagation会中断事件的继续传递。

preventDefault会阻止默认触发的浏览器事件(比如a标签点击后的跳转)

事件委托是一种优化策略，因为在监听的同级元素太多又非常重复的时候，可以在父上添加监听。

在传递事件的event中有个target对象，它一般为真正触发事件的元素，也就是事件传递过程中的最底层对象，通过这个对象可以知道到底谁触发的，分析出它的信息是什么，所以在父级添加通过分析信息来触发不同的函数，可以达到性能的优化，不用重复的添加多余的事件监听。而且监听子元素的时候，父级在事件链中本来就一定会被触发。