js事件冒泡

最新推荐文章于 2023-07-13 11:46:30 发布

周刊少年中二君

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量69

点赞数

分类专栏：前端开发#JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_43351379/article/details/110743056

版权

前端开发#JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery事件冒泡

事件的冒泡（Bubble）

指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发

并不是点击了三个重叠的位置导致了三个弹窗，而是事件的冒泡，导致了点3会出现1，2

点击3会出现事件冒泡，事件冒泡会冒到父亲身上，如果父亲身上也有点击事件，就会运行父亲绑定的事件
js的冒泡是事件冒泡
比如e的事件冒泡
因为q有click事件才会接受到div的冒泡
并不是将事件赋值在一个父级身上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.5.1.min.js"></script>
</head>
<style>
    .q{
        position:absolute;
        width: 400px;
        height: 400px;
        background-color: aqua;
    }
    .w{
        position:absolute;
        left: 400px;
        width: 300px;
        height: 300px;
        background-color: red;
    }
    .e{
        position:absolute;
        left: 300px;
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
<body>
    <div class="q">
        <div class="w">
            <div class="e">

            </div>
        </div>
    </div>
    <script>
        $('.q').click(function(){
            alert(1);
        })
        $('.w').click(function(){
            alert(2);
        })
        $('.e').click(function(){
            alert(3);
        })
    </script>
</body>
</html>

周刊少年中二君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件冒泡

jQuery事件冒泡事件的冒泡（Bubble）指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发并不是点击了三个重叠的位置导致了三个弹窗，而是事件的冒泡，导致了点3会出现1，2点击3会出现事件冒泡，事件冒泡会冒到父亲身上，如果父亲身上也有点击事件，就会运行父亲绑定的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫

专栏目录