事件的捕获和冒泡

这里涉及到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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容