事件流、事件冒泡、阻止冒泡

lxl211

已于 2023-02-21 22:57:39 修改

阅读量390

点赞数

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

于 2023-02-21 22:32:18 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/129151118

版权

js 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

文章介绍了事件流中的两种模式——事件冒泡（从子元素到父元素）和事件捕获（从父元素到子元素），并展示了如何通过`event.stopPropagation()`阻止事件冒泡。还提到了同时使用捕获和冒泡的情况以及它们的执行顺序。

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

1、事件流

在这里插入图片描述

2、事件冒泡：从小到大

概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

<style>
.father{
    width: 300px;
    height: 300px;
    background-color: pink;
}
.son{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

<div class="father">
    <div class="son"></div>
</div>
<script>
    const father=document.querySelector('.father');
    const son=document.querySelector('.son');
    console.log(son);
    // 默认是冒泡：从小到大
    document.addEventListener('click',function () {
        alert('我是爷爷');
    });
    father.addEventListener('click',function () {
        alert('我是baba');
    });
    son.addEventListener('click',function () {
        alert('我是儿子');
    });

点击一个红色盒子
默认会出现冒泡事件：从小到大！
可以理解成海底压强大，气泡小，快到海平面时，压强小，气泡大。
在这里插入图片描述

3、阻止冒泡：

在这里插入图片描述
例如：

son.addEventListener('click',function (e) {
    alert('我是儿子');
    e.stopPropagation();
});

点击一下：只会弹出儿子了，其他不再弹出
在这里插入图片描述

4、事件捕获：从大到小

// 捕获：如果同时加捕获和冒泡：那默认先捕获再冒泡
document.addEventListener('click',function () {
    alert('我是爷爷');
},true);
father.addEventListener('click',function () {
    alert('我是baba');
},true);
son.addEventListener('click',function () {
    alert('我是儿子');
},true);