《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”

近期，随着电视剧《长安的荔枝》大火，本篇就让我们以《长安的荔枝》为模板，详细讲解事件流、事件捕获、事件冒泡及阻止冒泡。

事件流 ：事件完整执行过程中的流动路径

1.捕获阶段------"从长安到八百里加急直奔岭南采摘荔枝"'

当杨贵妃在长安突然想吃荔枝了，唐玄宗即刻下令朝廷八百里加急"捕获"荔枝。

皇帝唐玄宗下令(Document)下令 ->
宰相杨国忠(Element html)批红 ->
刺史何履光(Element body)点兵 ->
荔枝使李善德(Element div)采摘 ->

2.冒泡阶段------"荔枝传回长安"

荔枝使李善德(Element div)采摘完毕，荔枝已装箱->
刺史何履光(Element body)岭南道损耗+1，明年预算再砍三成->
宰相杨国忠(Element html)上奏:"陛下，路途遥远，荔枝可能坏了->
皇上唐玄宗(Document)大怒：一群饭桶！！

捕获阶段便是自上而下，从父到子。
冒泡阶段则是从下到上，从子到父。

事件捕获

目标：简单了解事件捕获执行过程----->唐玄宗下令采摘荔枝，官员层层准备直达岭南

事件捕获概念：从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应的代码才能看到效果

代码：

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

javascript 复制代码

           document,addEventListener('click',function(e){
              alert('点击事件')
           })

说明：

addEventListener第三个参数传入true代表是捕获阶段
若传入false代表冒泡阶段触发，默认就是false

若是用L0事件监听，则只有冒泡阶段，没有捕获

xml 复制代码

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   <style>
       .father{
           width: 200px;
           height: 200px;
           background-color:green;
       }
       .son{
           width: 100px;
           height: 100px;
           background-color: red;
       }
   </style>
   </head>
   <body>
       <div class="father">
           <div class="son">

           </div>
       </div>
       <script>
           const fa=document.querySelectorAll('.father')
           const son=document.querySelectorAll('.son')
   document,addEventListener('click',function(e){
      alert('我是爷爷')
   }) // false 即为冒泡，默认为false
   fa.document,addEventListener('click',function(e){
      alert('我是爸爸')
   })
   son.document,addEventListener('click',function(e){
      alert('我是儿子')
   })

       </script>
   </body>
   </html>

事件冒泡

目标：能够说出事件冒泡的执行过程-->李善德将荔枝采回往上运往长安

事件冒泡概念：当一个元素被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一工程被称为事件冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是false，或者默认都是冒泡

阻止冒泡

目标：能够阻止冒泡的代码-->将已经坏了的荔枝及时扔出
需求：若想把事件就限制在当前元素内，就要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法：事件对象.stopPropagation // Propagation 传播
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效