面试官：js中的事件触发过程是什么样子的？

站长

2024年03月29日 21:51 · 阅读数 3

今天我们来聊一下一个简单的面试题！描述一下js中的事件触发过程！

js中的事件捕获和事件冒泡

在JavaScript中，事件传播机制包括两种主要方式：事件捕获（Capturing）和事件冒泡（Bubbling）。这两种方式决定了当在DOM（文档对象模型）中的某个元素上触发一个事件时，该事件如何在该元素及其祖先元素之间传播。

事件捕获（Event Capturing）

事件捕获阶段从DOM树的最顶层开始，即window对象，然后逐级向下，直到触发事件的目标元素。在这个过程中，事件会从最不具体的节点（通常是document或window）开始，沿着DOM树向下传播到最具体的节点（即事件的目标元素）。如果在捕获阶段有事件监听器被触发，并且它们中的任何一个调用了event.stopPropagation()方法，那么事件传播会立即停止，不会到达目标元素。

在事件监听器中，你可以通过将第三个参数设置为true来指定在捕获阶段处理事件：

element.addEventListener('click', function(event) {  
  // 处理事件  
}, true); // 第三个参数为true，表示在捕获阶段处理事件

事件冒泡（Event Bubbling）

事件冒泡阶段则正好相反，它从触发事件的目标元素开始，然后逐级向上传播，直到最顶层的window对象。在冒泡阶段，事件会从最具体的节点开始，然后沿着DOM树向上传播到最不具体的节点。如果在冒泡阶段有事件监听器被触发，并且它们中的任何一个调用了event.stopPropagation()方法，那么事件传播会立即停止，不会继续向上传播。

默认情况下，如果你没有指定事件监听器应该在哪个阶段处理事件，那么它会在冒泡阶段处理事件。你也可以通过将第三个参数设置为false来明确指定在冒泡阶段处理事件：

element.addEventListener('click', function(event) {  
  // 处理事件  
}, false); // 第三个参数为false或省略，表示在冒泡阶段处理事件

事件传播顺序

事件传播的完整顺序是：捕获阶段 -> 目标元素 -> 冒泡阶段。也就是说，如果一个元素及其祖先元素都注册了相同类型的事件监听器，那么这些监听器将按照上述顺序被触发。

阻止事件传播

event.stopPropagation()方法用于阻止事件在DOM树中进一步传播。无论是在捕获阶段还是冒泡阶段，调用这个方法都会阻止事件继续传播。

event.stopImmediatePropagation()方法的行为与event.stopPropagation()类似，但它还会阻止同一元素上的多个相同事件被触发。

js事件触发的过程

我们来通过一个小Demo来具体阐述一下js事件的触发过程

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        #wrap{
            width: 200px;
            height: 200px;background-color: rebeccapurple;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="wrap">
            <div id="box">

            </div>
        </div>
    </div>
    <script>
        let app = document.getElementById("app");
        let wrap = document.getElementById("wrap");
        let box = document.getElementById("box");

        // addEventListener有第三个参数，默认是false，true表示在捕获阶段触发,false表示在冒泡阶段触发
        app.addEventListener('click',()=>{//绑定，订阅，注册
            console.log("app")
        })

        wrap.addEventListener('click',()=>{
            console.log("wrap")
        })

        box.addEventListener('click',()=>{
            console.log("box")
        })
    </script>
</body>

我们写了三个嵌套容器app->wrap->box

我们可以用一个图来描述js的事件触发过程！

事件触发过程分为三个阶段：事件捕获、目标元素阶段和事件冒泡。