JS基础_事件的冒泡

最新推荐文章于 2024-04-14 19:33:29 发布

fly-phantomWing

最新推荐文章于 2024-04-14 19:33:29 发布

阅读量180

点赞数

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

本文链接：https://blog.csdn.net/weixin_41804367/article/details/108320589

版权

web 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

事件的冒泡

1、什么是事件的冒泡？

  当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。

2、举例

<html>
<!--编码格式-->
<meta charset="UTF-8">
<head>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        #s {
            width: 100px;
            height: 10px;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function () {
            var div = document.getElementById("box");
            var span = document.getElementById("s");
            s.onclick = function (event) {
                alert("我是span部分");
            }
            div.onclick = function () {
                alert("我是div部分");
            }
            document.body.onclick = function () {
                alert("我是body部分");
            }
        }
    </script>
</head>
<body>
<div id="box">
    我是div
    <span id="s">我是span</span>
</div>
</body>
</html>

代码中函数的执行顺序是：s.onclick()---->div.onclick()----> document.body.onclick；

若不想程序产生冒泡效果，可使用 事件对象.cancelBubble 撤销，事件对象.cancelBubble的默认值为false。

fly-phantomWing

关注

0
点赞
踩
0

收藏

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

事件的冒泡1、什么是事件的冒泡？当某个子类元素的某类型事件被触发时，其父类元素、祖类及以上级元素的相同类型的事件也会产生效果。2、举例<html><meta charset="UTF-8"><head> <style> #box { width: 200px; height: 200px; backgr
复制链接

扫一扫