事件的冒泡

最新推荐文章于 2023-02-02 22:26:53 发布

407指导员

最新推荐文章于 2023-02-02 22:26:53 发布

阅读量223

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109589410

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

事件的冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的冒泡</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        #s1 {
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function () {
            /**
             *事件的冒泡（bubble）
             *  -所谓冒泡就是事件的向上传导 ，当后代元素上的事件被触发
             *其祖先的相同事件也同样会被触发，注意是相同事件
             *  -点一下span也同时点了一下div,也点了一下body，
             *  -同时触发了三个单击响应函数
             *  -开发中大部分冒泡是有用的，如果不希望发生冒泡可以通过事件来取消冒泡
             *
             */
            //为s1绑定单击响应函数
            let s1 = document.getElementById("s1");
            s1.onclick = function (event) {
                event = event || window.event;
                alert("我是你爹！");
                //取消冒泡
                //可以将事件的cancelBubble设置为true，则取消冒泡
                event.cancelBubble = true;
            };
            //为box1绑定单击响应函数
            let box1 = document.getElementById("box1");
            box1.onclick = function (event) {
                event = event || window.event;
                alert("我是你爷爷！");
                event.cancelBubble = true;
            };
            //为body绑定一个单击响应函数
            document.body.onclick = function () {
              alert("我是你祖宗！");
            };
        };
    </script>
</head>
<body>
<div id="box1">
    我是box1
    <span id="s1">我是span</span>
</div>
</body>
</html>

在这里插入图片描述

注意点：

1.所谓冒泡就是事件的向上传导，当后代元素上的事件被触f发时，其祖先的相同事件也同样会被触发，注意是相同事件。

2.可以将事件的cancelBubble设置为true，则取消冒泡。

event = event || window.event;兼容性问题。

407指导员

关注

0
点赞
踩
0

收藏

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

事件的冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件的冒泡</title> <style> #box1 { width: 200px; height: 200px; background-color: yello
复制链接

扫一扫

专栏目录