4.什么是事件冒泡？

最新推荐文章于 2025-08-04 22:28:37 发布

原创最新推荐文章于 2025-08-04 22:28:37 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件冒泡

前端面试题专栏收录该内容

23 篇文章

订阅专栏

本文介绍了HTML事件冒泡的概念，并提供了一个实例，展示了如何通过JavaScript的事件监听和`e.stopPropagation()`方法来控制事件冒泡。当点击`p1`元素时，触发激活状态，而点击其他`p`元素则取消激活状态。这一实现方式揭示了DOM事件处理中的冒泡机制和阻止冒泡的技巧。

事件冒泡

<body>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>

对于以上 HTML 代码结构，要求点击p1时候进入激活状态，点击其他任何<p>都取消激活状态，如何实现？代码如下，注意看注释：

var body = document.body
bindEvent(body, 'click', function (e) {
    // 所有 p 的点击都会冒泡到 body 上，因为 DOM 结构中 body 是 p 的上级节点，事件会沿着 DOM 树向上冒泡
    alert('取消')
})

var p1 = document.getElementById('p1')
bindEvent(p1, 'click', function (e) {
    e.stopPropagation() // 阻止冒泡
    alert('激活')
})