详解JavaScript 事件流

2023年6月10日下午12:08 • JavaScript

请听我详细讲解“详解JavaScript 事件流”的完整攻略。

什么是JavaScript事件流

JavaScript事件流指的是介绍HTML中事件触发的顺序。HTML通常是从外部开始的，并从外部向下（冒泡阶段）移动到最下方元素，然后在内部从下到上执行（捕获阶段）。事件以冒泡的形式进行，这意味着在激活事件后，事件将从内部向外冒泡。例如，如果你点击一个按钮，事件将从内部按钮向外冒泡到包含按钮的元素。

JavaScript事件流分为三个不同的阶段，这些阶段分别是事件捕获阶段，目标阶段和冒泡阶段。在事件的不同阶段，您可以将JavaScript函数添加到事件中。

事件捕获阶段

在事件捕获阶段中，事件由最外层元素（文档的根节点）向下传导到事件触发的目标元素。事件从window对象开始，然后下降到触发元素。

window -> document -> html -> body -> ... -> target

下面是一个简单的事件捕获的示例：

<html>
<head>
    <title>事件冒泡和捕获</title>
</head>

<body>
    <div id="outer">
        <div id="inner">
            Hello, World!
        </div>
    </div>
</body>

<script>
    function myEventHandler() {
        console.log("事件被触发了!");
    }

    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");

    outer.addEventListener("click", myEventHandler, true); //开启事件捕获
    inner.addEventListener("click", myEventHandler, true); 
</script>
</html>

在这个例子中，我们手动开启了事件的捕获阶段。我们在outer和inner两个分别添加了click事件，并在第三个参数中设置成了true。这意味着在事件监听器中，我们可以在事件到达元素本身之前知道元素上发生的事件。

事件冒泡阶段

在事件冒泡阶段中，事件从目标元素传播到最外层元素，并且沿途触发为元素注册的事件处理程序。通常，您会在事件冒泡阶段注册大多数事件处理程序。

target -> ... -> body -> html -> document -> window

下面是一个简单的事件冒泡的示例：

<html>
<head>
    <title>事件冒泡和捕获</title>
</head>

<body>
    <div id="outer">
        <div id="inner">
            Hello, World!
        </div>
    </div>
</body>

<script>
    function myEventHandler() {
        console.log("事件被触发了!");
    }

    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");

    outer.addEventListener("click", myEventHandler, false); //默认情况下，事件冒泡阶段是关闭的
    inner.addEventListener("click", myEventHandler, false); 
</script>
</html>

在这个例子中，我们手动关闭了事件捕获阶段，并在outer和inner两个分别添加了click事件。当我们在inner元素上单击时，事件将从inner元素向上冒泡，最终到达outer元素。在事件监听器中，我们将会看到先输出"事件被触发了!"，然后再是"事件被触发了!"。

阻止事件冒泡

有时候，您可能需要防止事件继续冒泡。例如，在表单提交时，您可能希望表单只被提交一次。为此，可以使用event.stopPropagation();防止事件继续传播：

<html>
<head>
    <title>阻止事件冒泡</title>
</head>

<body>
    <div id="outer">
        <div id="inner">
            <input type="button" value="按钮">
        </div>
    </div>
</body>

<script>
    function myEventHandler(event) {
        console.log("事件被触发了!");
        event.stopPropagation(); // 阻止事件冒泡
    }

    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");
    var button = document.querySelector("input[type='button']");

    outer.addEventListener("click", myEventHandler, false);
    inner.addEventListener("click", myEventHandler, false);
    button.addEventListener("click", myEventHandler, false);
</script>
</html>

在这个例子中，我们添加一个input按钮，并在每个元素上添加了click事件监听器。当您单击按钮时，事件将不会冒泡到其他元素。