JS里控制事件在捕获与冒泡阶段的触发

最新推荐文章于 2025-04-19 12:49:59 发布

原创最新推荐文章于 2025-04-19 12:49:59 发布 · 883 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文探讨了JavaScript中事件传播的三个阶段：捕获、目标执行和冒泡。通过实例解释了事件如何沿着DOM树向下捕获并在目标元素上执行，最后向上冒泡。特别指出，默认情况下事件在冒泡阶段触发，并展示了如何在捕获阶段绑定事件的示例。

JS中的事件创建后，会按照如下过程在HTML元素间进行传播。

第一阶段：事件捕获，事件对对象沿DOM树向下传播
第二阶段：目标出发，运行事件监听函数
第三阶段：事件冒泡，事件沿DOM树向上传播

在这里插入图片描述

黑线表示的是事件的捕获阶段，捕获阶段捕获到三个click方法，红线表示的是事件的冒泡阶段，事件默认都是在冒泡阶段触发，所以三个click事件依次触发。
在这里插入图片描述

		var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click", clickBtn1);
        function clickBtn1() {
            console.log("clickBtn1");
        }

        var div1 = document.getElementById("div1");
        div1.addEventListener("click", clickDiv1);
        function clickDiv1() {
            console.log("clickDiv1");
        }

        var div2 = document.getElementById("div2");
        div2.addEventListener("click", clickDiv2);
        function clickDiv2() {
            console.log("clickDiv2");
        }

在这里插入图片描述

	div1.addEventListener("click", clickDiv1,false);
    btn1.addEventListener("click", clickBtn1,false);
    div2.addEventListener("click", clickDiv2,true);