浏览器事件模型捕获、冒泡

最新推荐文章于 2023-04-21 11:48:11 发布

甩锅工程师

最新推荐文章于 2023-04-21 11:48:11 发布

阅读量293

点赞数

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/KID963931445/article/details/115635460

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

本文介绍了浏览器中的事件模型，包括捕获和冒泡两个阶段。当点击嵌套的div元素时，事件会从window依次向下触发到具体的元素。示例展示了事件监听的捕获和冒泡顺序，并通过代码解释了如何使用addEventListener来监听这两个阶段的事件。同时，文章提及了阻止事件传播的方法e.stopPropagation()及其作用。

摘要由CSDN通过智能技术生成

浏览器中有两种事件模型，那就是捕获和冒泡。
当div发生嵌套时，点击其中一个div，所发生的事件并不会仅仅只针对被点击的div，他会触发自己父元素的事件。

如图所示，执行顺序从window向自己的为捕获阶段；反之为冒泡阶段。执行过程总是先执行捕获在执行冒泡。
例子如下。

<style>
    #parent{
        width: 500px;
        height:500px;
        background: red;
        margin:auto;
    }
    #son{
        width: 400px;
        height:400px;
        background: green;
        margin:auto;
    }

    #child{
        width: 300px;
        height:300px;
        background: yellow;
        margin:auto;
    }
</style>

<body>
  	<div id="parent">
        parent
        <div id="son">
            son
            <div id="child">child</div>
        </div>
    </div>
</body>

let  parent = document.getElementById("parent");
    let  son = document.getElementById("son");
    let  child = document.getElementById("child");
window.addEventListener("click",function(){
    console.log("冒泡,window")
})
parent.addEventListener("click",function(){
    console.log("冒泡,parent")
})
son.addEventListener("click",function(){
    console.log("冒泡,son")
})
child.addEventListener("click",function(){
    console.log("冒泡,child")
})
child.addEventListener("click",function(){
    console.log("捕获,child")
},true)
son.addEventListener("click",function(){
    console.log("捕获,son")
},true)
parent.addEventListener("click",function(){
    console.log("捕获,parent")
},true)
window.addEventListener("click",function(){
    console.log("捕获,window")
},true)

输出顺序为
捕获,window
捕获,parent
捕获,son
捕获,child
冒泡,child
冒泡,son
冒泡,parent
冒泡,window

利用addEventListener去监听元素的click事件，第三参数默认为false，就是监听的冒泡阶段的事件。true就是监听捕获阶段的事件。
如果想阻止是事件流程就可以用
e.stopPropagation();
这个方法是用来阻止事件流程，包括捕获阶段和冒泡阶段。