前端面试之浏览器机制中触发事件的三个阶段-优快云博客

本文深入解析浏览器事件机制的三个核心阶段：事件捕获、事件目标处理函数与事件冒泡，并通过示例代码演示如何实现这些机制。

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

你知道浏览器事件机制中触发事件的三个阶段是什么吗? 这是经常被问及的问题,现在咱们就来看看.

  <div class="box" style="width:300px;height:300px;background:green;">
        parent
        <div class="child">child
            <div class="button">提交</div>
        </div>
    </div>
复制代码

 var divs=document.querySelectorAll("div");//获取所有的divs
    function fn0(){
        alert("box");
    }
    function fn1(){
        alert("child");
    }
    function fn2(){
        alert("but");
    }
    divs[0].addEventListener("click",fn0,false);
    divs[1].addEventListener("click",fn1,false);
    divs[2].addEventListener("click",fn2,false);

复制代码

浏览器机制中触发事件的三个阶段:

事件捕获
事件目标处理函数
事件冒泡

描述:

当达到某个条件触发了某个元素绑定的事件的时候,就会从document顶级元素发送一个事件流,顺着dom树一层一层向下查找,直到找到了目标元素,这个层层查找的过程称为事件的捕获,在这个阶段不会触发绑定的事件.
达到目标元素,这个阶段称为"事件目标处理函数",触发这个元素绑定的事件
然后就从目标元素开始一层层往顶层元素传递,在这个过程中如果发现元素绑定了此类型的事件,就会触发,这就是事件冒泡.

其中addEventListener第三个参数默认为false,代表冒泡阶段执行,如果改为true,就代表在捕获阶段执行. 如果想要阻止冒泡行为,可以用e.stopPropagation() 或 e.cancelBubble = true（IE）