事件俘获，冒泡，委托

JS的事件流如下：（图忘记在哪里偷的。。忘记了）

类似于，往水里丢下去一块大石头，在沉下去的过程中石头是可以被俘获的（事件俘获），
沉到底之后会往上冒泡泡（冒泡，通常用于事件委托，减少对DOM的操作）
那么事件俘获和事件冒泡有什么用呢？
事件俘获：我确实想不到有啥用。。一开始我以为可以进行拦截。。。
事件冒泡的话就可以减少对DOM的操作，减少重排。

  <style>
        ul>li{
           
            width: 50px;
            height: 30px;
            background-color: blue;
        }
        ul li:nth-child(2n){
           background-color: red;
        }
    </style>

 <script>
           const ul = document.querySelector("ul");
           const li = document.querySelector("li")
           ul.addEventListener('click',function(e){
               if(e.target.tagName.toLowerCase() == 'li')
               alert(e.target.dataset.value)
             
           })
      
    </script>