事件的冒泡

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。

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