事件的捕获和冒泡

这里涉及到addEventListener的三个参数：
第一个参数：事件类型
第二个参数：事件的处理函数
第三个参数：指定事件处理函数的时期或阶段(boolean)，默认值为

DOM事件流
第三个参数设计到事件的捕获与冒泡，为true时捕获，false时冒泡。默认为false，即冒泡

  <div class="div1" id="div1">
        <div class="div2">
            <div class="div3">

            </div>
        </div>
  <script>
        let div1 = document.querySelector(".div1")
        let div2 = document.querySelector(".div2")
        let div3 = document.querySelector(".div3")
        div1.addEventListener('click', function() {
            alert(1)
        }, true)
        div2.addEventListener('click', function() {
            alert(2)
        }, true)
        div3.addEventListener('click', function() {
            alert(3)
        }, true)
    </script>

布局图
当我们点击div3的时候的执行顺序
如果是捕获：div1,di2,di3
如果是冒泡：div3,di2,di1