JavaScript中的冒泡事件（事件的传播）_js冒泡事件是什么类型-优快云博客

本文详细解析了JavaScript中的冒泡事件概念，探讨了不同浏览器的事件处理机制，包括冒泡机制与捕获机制的区别，并提供了阻止冒泡事件的具体实现方法及兼容性语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是冒泡事件：JavaScript中子级标签触发事件，父级程序默认也会触发相同类型的事件。这样的效果称为冒泡事件（只与标签在HTML中的层级关系有关，与css和显示效果无关）
执行顺序都是从当前标签向父级元素执行，实际的标签的捕获顺序是有区别的
IE浏览器是从子级向父级获取标签，称为冒泡机制
其他浏览器是从父级向子级获取标签，称为捕获机制
虽然获取标签的方式不一样，但是现在所有的执行顺序都是从当前标签向父级标签执行

阻止冒泡事件：事件对象.stopPropagation()，哪个标签有阻止冒泡事件代码,冒泡事件执行就到这个标签为止。只触发自己身上的事件，不会触发父级标签相同类型的事件。只管自己，谁写谁不触发，子级父级都不管，就自己触发自己的事件
兼容语法：

            if(事件对象.stopPropagation){
                事件对象.stopPropagation();
            }else{
                事件对象.cancelBubble = true;
            }

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background: blue;
        }

        .middle{
            width: 300px;
            height: 300px;
            background: green;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>

    <script>
     var oDivBox = document.querySelectorAll('div')[0];
     var oDivMiddle = document.querySelectorAll('div')[1];
     var oDivInner = document.querySelectorAll('div')[2];
        
        oDivBox.onclick = function(e){
            e = e || window.event;
            console.log('我是box-div触发的事件');
            // e.stopPropagation();

            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        }

        oDivMiddle.onclick = function(e){
            e = e || window.event;
            console.log('我是middle-div触发的事件');
            // e.stopPropagation();

            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        }

        oDivInner.onclick = function(e){
            e = e || window.event;
            console.log('我是inner-div触发的事件');
            // e.stopPropagation();

            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        }
                
        document.onclick = function(){
            console.log('我是document');
        }
    </script>
</body>