事件冒泡
    结构上（非视觉上）嵌套关系的元素 会存在事件冒泡的功能
    即同一事件 自子元素冒泡向父元素（自底向上）
    EQ$ODVF7@1L23W`5NC2RY@U.png

    1. <style>
    2.     .wapper{
    3.         width: 300px;
    4.         height: 300px;
    5.         background-color: red;
    6.     }
    7.     .content{
    8.         margin-left: 300px;
    9.         width: 200px;
    10.         height: 200px;
    11.         background-color: yellow;
    12.     }
    13.     .box{
    14.         margin-left: 200px;
    15.         width: 100px;
    16.         height: 100px;
    17.         background-color: green;
    18.     }
    19. </style>
    20. <body>
    21.     <div class="wapper">
    22.         <div class="content">
    23.             <div class="box"></div>
    24.         </div>
    25.     </div>
    26.     <script>
    27.         var wapper = document.getElementsByClassName('wapper')[0];
    28.         var content = document.getElementsByClassName('content')[0];
    29.         var box = document.getElementsByClassName('box')[0];
    30.         wapper.addEventListener('click',function(){
    31.             console.log('wapper');
    32.         },false)
    33.         content.addEventListener('click',function(){
    34.             console.log('content');
    35.         },false)
    36.         box.addEventListener('click',function(){
    37.             console.log('box');
    38.         },false)
    39.     </script>
    40. </body>

    由上图可知 在视觉上 这三个元素没有嵌套关系 但是结构上是存在嵌套关系的
    即只有结构上存在嵌套关系的元素 会存在事件冒泡的功能
    上图结构上绿色是最里层的元素 红色是最外层的元素
    点击红色的区域 会返回 wapper
    点击黄色的区域 会返回 content wapper
    点击绿色的区域 会返回 box content wapper
    即自子元素冒泡向父元素
    事件捕获
    结构上（非视觉上）嵌套关系的元素 会存在事件捕获的功能
    即同一事件 自父元素捕获至子元素（事件源元素）（自底向上）
    由上例 只需要将 addEventListener中的flase改为true 其事件处理模型就变为事件捕获了
    点击红色的区域 会返回 wapper
    点击黄色的区域 会返回 wapper content
    点击绿色的区域 会返回 wapper content box
    输出的顺序是由外向里的
    触发顺序

    先捕获 后冒泡
    //若同一个事件类型同时绑定两个事件处理模型 一个是事件冒泡 一个是事件捕获 那么先绑定的先执行（可能过时了）

    1. <style>
    2.     .wapper{
    3.         width: 300px;
    4.         height: 300px;
    5.         background-color: red;
    6.     }
    7.     .content{
    8.         margin-left: 300px;
    9.         width: 200px;
    10.         height: 200px;
    11.         background-color: yellow;
    12.     }
    13.     .box{
    14.         margin-left: 200px;
    15.         width: 100px;
    16.         height: 100px;
    17.         background-color: green;
    18.     }
    19. </style>
    21. <body>
    22.     <div class="wapper">
    23.         <div class="content">
    24.             <div class="box"></div>
    25.         </div>
    26.     </div>
    27.     <script>
    28.         var wapper = document.getElementsByClassName('wapper')[0];
    29.         var content = document.getElementsByClassName('content')[0];
    30.         var box = document.getElementsByClassName('box')[0];
    31.         wapper.addEventListener('click',function(){
    32.             console.log('wapper-Bub');
    33.         },false)
    34.         content.addEventListener('click',function(){
    35.             console.log('content-Bub');
    36.         },false)
    37.         box.addEventListener('click',function(){
    38.             console.log('box-Bub');
    39.         },false)
    40.         wapper.addEventListener('click',function(){
    41.             console.log('wapper');
    42.         },true)
    43.         content.addEventListener('click',function(){
    44.             console.log('content');
    45.         },true)
    46.         box.addEventListener('click',function(){
    47.             console.log('box');
    48.         },true)
    49.     </script>
    50. </body>

    点击绿色的区域 会返回 wapper content box box-Bub content-Bub wapper-Bub
    注 IE没有捕获事件 focus，blur，change，submit，reset，select 等事件不冒泡