DOM事件流_js 点击事件one daaeventlistener-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62937694/article/details/121182240

本文详细讲解了DOM事件流的捕获阶段和冒泡阶段，通过示例演示了如何通过`addEventListener`的userCapture属性控制事件触发顺序，以及在JavaScript中实现不同阶段的事件处理。

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

dom事件流分为捕获阶段和冒泡阶段，事件会一层一层传递，从父节点到子节点的过程叫做捕获阶段；从子节点到父节点传递的过程，叫冒泡阶段，js代码只能执行其中一个阶段，并且传统事件(onclick等)只能得到冒泡事件；daaEventlistener 中最后一个参数userCapture，为true就是捕获阶段调用程序，为false就是冒泡阶段调用程序

1、捕获阶段：如下代码，点击son盒子，先弹出father盒子，再弹出son盒子

var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        // 1、userCapture是true，捕获阶段 调用程序
        son.addEventListener('click',function(){
            alert('son');
        },true)
        father.addEventListener('click',function(){  //捕获阶段,从外层往目标事件传递，先弹出father
            alert('father');
        },true)

2、冒泡阶段；如下代码，先弹出son，在弹出father

// 2、userCapture是false或者 省略，冒泡阶段 调用程序
        son.addEventListener('click',function(){
            alert('son');
        },false)
        father.addEventListener('click',function(){  //冒泡阶段,从目标事件传递到最外层，先弹出fatherson
            alert('father');
        },false)