一个DOM元素绑定多个事件时，先执行冒泡还是捕获

最新推荐文章于 2024-04-17 11:31:34 发布

原创

最新推荐文章于 2024-04-17 11:31:34 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #事件处理机制

当一个DOM元素同时绑定了捕获和冒泡阶段的事件，实际执行时会先进行捕获阶段的事件处理，然后是冒泡阶段。此现象在面试中常被问到。

答案是：先执行捕获

看到一些说法称 “绑定在被点击元素的事件是按照代码顺序发生”，实际测试了一下，被点击元素的事件也是先捕获、后冒泡

<div id="s1">s1
</div>

<script>
    s1.addEventListener("click", function(e) {
    
        
        console.log("s1 冒泡");     
    }, false);   //冒泡

    s1.addEventListener("click", function(e) {
    
        
        console.log("s1 捕获"); 
    }, true);     //捕获
</script>

点击 S1，输出打印结果

s1 捕获
s1 冒泡