【js】事件冒泡、事件捕获的定义及应用

最新推荐文章于 2025-11-02 22:07:16 发布

原创最新推荐文章于 2025-11-02 22:07:16 发布 · 767 阅读

1 ·

CC 4.0 BY-SA版权

JS实例专栏收录该内容

60 篇文章

订阅专栏

本文解析了事件冒泡与事件捕获两种不同的事件传播机制，并通过一个简单的HTML示例展示了这两种机制的工作方式。事件冒泡机制中，事件从最具体的元素开始触发，逐级向上传播至document对象；而在事件捕获机制中，事件则由document对象开始，逐级向下传播到具体的元素。

一、定义

事件冒泡：IE的事件流，即事件开始时由最具体的元素（文档嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（document）。

事件捕获：是不具体的节点更早接收到事件，而具体的节点应该最后接收到事件。

二、实例

<!DOCTYPE html>
<html onclick="console.log('c')">

<head>
    <meta charset="UTF-8" />
    <title>demo</title>
</head>

<body onclick="console.log('b')">
    <div id="myDiv" onclick="console.log('a')">click me</div>
    <script>
        document.onclick = function () {
            console.log('d')
        }
    </script>
</body>

</html>

点击元素 myDiv 的运行结果如下：