JavaScript-DOM-事件冒泡

最新推荐文章于 2024-09-05 23:28:05 发布

十二啊

最新推荐文章于 2024-09-05 23:28:05 发布

阅读量1.1k

点赞数

分类专栏：十二的 Javascript 之路文章标签： javascript 前端 html

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124484824

版权

JavaScript DOM 事件冒泡阻止冒泡事件处理

关键词由CSDN通过智能技术生成

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-事件冒泡

事件的冒泡(Bubble)

所谓的冒泡就是事件自下而上的响应，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况下事件冒泡都是有用的，如果不希望发生事件冒泡，可以通过将事件对象属性cancelBubble设置为true来取消冒泡。
用一张图来描述更清晰：
在这里插入图片描述

实例-点击事件逐层触发

运行下面这个完整例子来感受一下事件如何冒泡吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM-事件冒泡示例</title>
        <script>
            window.onload = function(){
                document.body.onclick = function(){
                    alert('我是body!');
                }
                let box1 = document.getElementById('box1');
                box1.onclick = function(){
                    alert('我是div!');
                }
                let span1 = document.getElementById('span1');
                span1.onclick = function(event){
                    event = event|| window.event;
                    // 取消冒泡：通过设置事件对象的cancelBubble属性
                    // event.cancelBubble = true;
                    alert('我是span!');
                }
            }
        </script>
        <style>
            #box1{
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
            }
            #span1{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            div区域
            <span id="span1">span区域</span>
        </div>
    </body>
</html>