事件捕获与冒泡

掌握DOM事件流：捕获、目标与冒泡详解

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

个人总结前端面试考点专栏收录该内容

7 篇文章

订阅专栏

本文详细解析DOM事件流的三个阶段及其顺序，包括事件捕获、目标和冒泡，并介绍如何通过addEventListener控制事件传播。通过实例演示如何使用stopPropagation阻止事件冒泡。

DOM事件流有三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件捕获比事件冒泡优先

addEventListener()有三个参数，分别是事件名、函数、布尔值（默认冒泡：false）

<body>
    <button>
        <span>按钮</span>
    </button>
    <script>
        var body=document.getElementsByTagName('body')[0]
        var button=document.getElementsByTagName('button')[0]
        var span=document.getElementsByTagName('span')[0]
        function fn(){
            console.log("我是",this.nodeName);
        }
        body.addEventListener("click",fn,false)
        button.addEventListener("click",fn,false)
        span.addEventListener("click",fn,false)
    </script>
</body>

<body>
    <button>
        <span>按钮</span>
    </button>
    <script>
        var body=document.getElementsByTagName('body')[0]
        var button=document.getElementsByTagName('button')[0]
        var span=document.getElementsByTagName('span')[0]
        function fn(){
            console.log("我是",this.nodeName);
        }
        body.addEventListener("click",fn,true)
        button.addEventListener("click",fn,true)
        span.addEventListener("click",fn,true)
    </script>
</body>