事件冒泡：如果出现嵌套关系，并且嵌套的元素都有相同的事件，那么当我们操作子元素的时候，会像父级元素一层一层传递
    事件捕获：与事件捕获相反

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8" />
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.         <title>Document</title>
    8.         <style type="text/css">
    9.             * {
    10.                 margin: 0;
    11.                 padding: 0;
    12.             }
    13.             .a1 {
    14.                 width: 400px;
    15.                 height: 400px;
    16.                 background-color: red;
    17.             }
    18.             .a2 {
    19.                 width: 300px;
    20.                 height: 300px;
    21.                 background-color: pink;
    22.             }
    23.             .a3 {
    24.                 width: 200px;
    25.                 height: 200px;
    26.                 background-color: blue;
    27.             }
    28.         </style>
    29.     </head>
    30.     <body>
    31.         <div class="a1">
    32.             <div class="a2">
    33.                 <div class="a3"></div>
    34.             </div>
    35.         </div>
    36.         <script>
    37.             let a1 = document.querySelector('.a1'),
    38.                 a2 = document.querySelector('.a2'),
    39.                 a3 = document.querySelector('.a3')
    40.             a1.addEventListener(
    41.                 'click',
    42.                 function () {
    43.                     console.log('a1')
    44.                 },
    45.                 false
    46.             )
    47.             a2.addEventListener(
    48.                 'click',
    49.                 function () {
    50.                     console.log('a2')
    51.                 },
    52.                 false
    53.             )
    54.             a3.addEventListener(
    55.                 'click',
    56.                 function () {
    57.                     console.log('a3')
    58.                 },
    59.                 false
    60.             )
    61.         </script>
    62.     </body>
    63. </html>

    所以当我们点a3的时候会打印a3,a2,a1,
    取消冒泡

    1. //  取消冒泡
    2. function cancelBubble(e) {
    3.         var e = e || event
    4.         if (e.stopPropagation) {
    5.                 e.stopPropagation()
    6.         } else {
    7.                 e.cancelBubble = true
    8.         }
    9. }  
    10. //Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为 true 可阻止事件的传播。

    取消默认事件（我们定义的事件）

    e.preventDefault()