addEventListener 冒泡和捕获

最新推荐文章于 2023-12-20 09:22:27 发布

夜跑者

最新推荐文章于 2023-12-20 09:22:27 发布

阅读量226

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/liubangbo/article/details/84675706

版权

JavaScript 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

#div1 {
    width: 500px;
    height: 300px;
    background-color: #4fc08d;
    display:flex;
    justify-content:center;
    align-items:center;
}

#div2 {
    width: 200px;
    height: 200px;
    background-color: red;
}

<div id="div1">
    <div id="div2"></div>
</div>

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

div1.addEventListener("click", function () {
    console.log("div1");
}, true);
div2.addEventListener("click", function () {
    console.log("div2");
}, true);

用鼠标点击div2 打印顺序为： div1 div2 // 捕获

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

div1.addEventListener("click", function () {
    console.log("div1");
});
div2.addEventListener("click", function () {
    console.log("div2");
});

用鼠标点击div2 打印顺序为： div2 div1 //冒泡