从代码出发，一次性理解 JS 事件流

沐爸muba

已于 2024-09-02 15:11:09 修改

阅读量973

点赞数 23

分类专栏：面试题 JavaScript 文章标签： javascript 前端面试

于 2024-08-25 18:40:53 首次发布

本文链接：https://blog.csdn.net/m0_37943716/article/details/141532646

版权

面试题同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

JavaScript

29 篇文章 0 订阅

订阅专栏

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

掌握 JavaScript 事件流可以深入理解事件在Web页面上的传播方式，这对于开发交互式和动态网页至关重要。理解事件流可以帮助你更有效地控制事件的行为，避免不必要的事件冲突，以及实现更精细的事件监听和处理逻辑。

今天分享下什么是事件流？事件流的三个阶段？如何控制事件流？如何阻止事件传播？如何阻止默认行为？什么是事件委托？

一、事件流

JS 事件流（也称为DOM事件流）是描述在DOM中事件如何传播的机制。当用户在浏览器中执行某些操作（如点击、按键）时，这些操作会触发事件。这些事件会遵循一定的顺序在DOM元素之间传播，这个顺序和过程就是事件流。

JS 事件流有三个阶段：、捕获阶段（Capturing Phase）、目标阶段（Target Phase）和冒泡阶段（Bubbling Phase）。

捕获阶段

在捕获阶段，事件从文档的根节点（通常是<html>元素）开始，沿着DOM树向下传播到事件的目标节点（即触发事件的元素）。在这个过程中，事件会经过目标节点的所有祖先节点。在捕获阶段，事件处理器可以阻止事件的进一步传播，即取消冒泡。

目标阶段

严格来说，目标阶段并不是事件流的一个独立阶段，而是事件到达其目标元素时的一个点。在这个阶段，事件在目标元素上被处理。然而，由于这个阶段通常包含在捕获阶段和冒泡阶段之间，因此它经常被提及。

冒泡阶段

在冒泡阶段，事件从目标节点开始，沿着DOM树向上传播到文档的根节点。在冒泡阶段，事件会触发所有注册了冒泡事件监听器的节点上的事件处理程序。这是事件流中最常用的阶段，因为大多数事件处理程序都是在这个阶段注册的。

二、事件监听器

可以使用事件侦听器 addEventListener 可以控制事件流。

在JavaScript中，addEventListener 方法用于向指定元素添加事件监听器，以处理该元素上的事件。该方法接受三个参数：事件名称、事件处理函数和一个可选的布尔值，第三个参数用于指定事件在捕获阶段触发（true）还是在冒泡阶段触发（false，默认值）。以此控制事件流。

冒泡执行（默认）

JS 事件的执行顺序默认由内向外冒泡执行，即内层元素的事件侦听器会先触发，外层元素的事件侦听器后触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  
    外层元素  
    <div id="inner" style="padding: 10px; border: 1px solid #f00;">  
        内层元素  
    </div>  
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", function () {
    console.log("document被点击了");
  });

  // 在外层元素上为点击事件
  outerElement.addEventListener("click", function (event) {
    console.log("外层元素被点击了");
  });

  // 在内层元素上为点击事件
  innerElement.addEventListener("click", function (event) {
    console.log("内层元素被点击了");
  });
</script>

以上代码，点击内层元素时，会依次打印"内层元素被点击了"，“外层元素被点击了”，“document被点击了”

捕获执行

如果指定事件侦听器在捕获阶段触发，那么 JS 事件的执行顺序将由外向内执行，即外层元素的事件侦听器先触发，内层元素的事件侦听器会后触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  
    外层元素  
    <div id="inner" style="padding: 10px; border: 1px solid #f00;">  
        内层元素  
    </div>  
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", 
    function () {
      console.log("document被点击了");
    },
    true // 设置捕获阶段触发
  );

  // 在外层元素上为点击事件
  outerElement.addEventListener(
    "click",
    function (event) {
      console.log("外层元素被点击了");
    },
    true // 设置捕获阶段触发
  );

  // 在内层元素上为点击事件
  innerElement.addEventListener(
    "click",
    function (event) {
      console.log("内层元素被点击了");
    }
  );
</script>

以上代码的运行结果：

点击内层元素时，会依次打印"document被点击了"，“外层元素被点击了”，“内层元素被点击了”。
点击外层元素时，会依次打印"document被点击了"，“外层元素被点击了”。

变异情况

注意：当同时存在冒泡阶段执行和捕获阶段执行时，记住一个原则：捕获阶段先执行，冒泡阶段后执行。

示例一

<div id="outer" style="padding: 20px; border: 1px solid #000;">  
    外层元素  
    <div id="inner" style="padding: 10px; border: 1px solid #f00;">  
        内层元素  
    </div>  
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", 
    function () {
      console.log("document被点击了");
    },
    false // 冒泡阶段触发
  );

  // 在外层元素上为点击事件
  outerElement.addEventListener(
    "click",
    function (event) {
      console.log("外层元素被点击了");
    },
    true // 设置捕获阶段触发
  );

  // 在内层元素上为点击事件
  innerElement.addEventListener(
    "click",
    function (event) {
      console.log("内层元素被点击了");
    }
  );
</script>

以上代码的运算结果：

点击内层元素时，会依次打印"外层元素被点击了"，“内层元素被点击了”，“document被点击了”。
点击外层元素时，会依次打印"外层元素被点击了"，“document被点击了”。

示例二

<div id="outer" style="padding: 20px; border: 1px solid #000;">  
    外层元素  
    <div id="inner" style="padding: 10px; border: 1px solid #f00;">  
        内层元素  
    </div>  
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", 
    function () {
      console.log("document被点击了");
    },
    true // 捕获阶段触发
  );

  // 在外层元素上为点击事件
  outerElement.addEventListener(
    "click",
    function (event) {
      console.log("外层元素被点击了");
    },
    false // 冒泡阶段触发
  );

  // 在内层元素上为点击事件
  innerElement.addEventListener(
    "click",
    function (event) {
      console.log("内层元素被点击了");
    }
  );
</script>

以上代码的运算结果：

点击内层元素时，会依次打印"document被点击了"，“内层元素被点击了”，“外层元素被点击了”。
点击外层元素时，会依次打印"document被点击了"，“外层元素被点击了”。

示例三

为同一个元素设置多个事件，且不同阶段触发。

<div id="outer" style="padding: 20px; border: 1px solid #000;">  
    外层元素  
    <div id="inner" style="padding: 10px; border: 1px solid #f00;">  
        内层元素  
    </div>  
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", 
    function () {
      console.log("document被点击了");
    },
    // true
  );

  // 在外层元素上为点击事件
  outerElement.addEventListener(
    "click",
    function (event) {
      console.log("外层元素被点击了");
    },
    false // 冒泡捕获阶段触发
  );
  // 在外层元素上为点击事件2
  outerElement.addEventListener(
    "click",
    function (event) {
      console.log("外层元素被点击了2");
    },
    true // 设置捕获阶段触发
  );

  // 在内层元素上为点击事件
  innerElement.addEventListener(
    "click",
    function (event) {
      console.log("内层元素被点击了");
    }
  );
</script>

以上代码的运算结果：

点击内层元素时，会依次打印"外层元素被点击了2"，“内层元素被点击了”，“外层元素被点击了”，“document被点击了”。
点击外层元素时，会依次打印"外层元素被点击了2"，“外层元素被点击了”，“document被点击了”。

三、阻止事件传播

在事件流中，事件会在捕获阶段和冒泡阶段传播。但在某些情况下，我们可能只希望事件在捕获阶段或冒泡阶段被处理，而不希望它继续传播。此时，可以在事件处理函数中使用event.stopPropagation()方法来阻止事件进一步传播（无论是捕获阶段还是冒泡阶段）。

阻止向上冒泡

<div id="outer" style="padding: 20px; border: 1px solid #000">
  外层元素
  <div id="inner" style="padding: 10px; border: 1px solid #f00">
    内层元素
  </div>
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", function () {
    console.log("document被点击了");
  });

  // 为外层元素添加点击事件监听器
  outerElement.addEventListener("click", function (event) {
    console.log("外层元素被点击了");
    // 这里原本会执行一些操作，但现在由于内层元素的阻止，这些操作在点击内层元素时不会执行
  });

  // 为内层元素添加点击事件监听器，并阻止事件冒泡
  innerElement.addEventListener("click", function (event) {
    event.stopPropagation(); // 阻止事件冒泡
    console.log("内层元素被点击了");
    // 这里执行内层元素特有的操作
  });
</script>

以上代码的运行结果：

点击内层元素时，只会打印"内层元素被点击了"。
点击外层元素时，会依次打印"外层元素被点击了"、“document被点击了”，因为外层元素依然向上冒泡。

双向阻止传递

在捕获阶段触发的事件监听器，如果设置了 event.stopPropagation(); 那么会同时阻止事件向上和向下传递，换句话说，只有点击元素自身，事件监听器才会触发。

<div id="outer" style="padding: 20px; border: 1px solid #000">
  外层元素
  <div id="inner" style="padding: 10px; border: 1px solid #f00">
    内层元素
  </div>
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", function () {
    console.log("document被点击了");
  });

  // 为外层元素添加点击事件监听器
  outerElement.addEventListener(
    "click",
    function (event) {
      event.stopPropagation();
      console.log("外层元素被点击了");
    },
    true
  );

  // 为内层元素添加点击事件监听器
  innerElement.addEventListener("click", function (event) {
    console.log("内层元素被点击了");
  });
</script>

以上代码的运行结果：

点击内层元素时，只会打印"外层元素被点击了"。
点击外层元素时，只会打印"外层元素被点击了"。

阻止向下传递

你可能会想，既然有阻止向上冒泡和阻止双向传递，那么应该有阻止向下传递啊，实际上是没有的。看下方代码：

<div id="outer" style="padding: 20px; border: 1px solid #000">
  外层元素
  <div id="inner" style="padding: 10px; border: 1px solid #f00">
    内层元素
  </div>
</div>

<script>
  // 获取外层元素和内层元素
  var outerElement = document.getElementById("outer");
  var innerElement = document.getElementById("inner");

  // 为document添加点击事件监听器
  document.addEventListener("click", function () {
    console.log("document被点击了");
  });

  // 为外层元素添加点击事件监听器
  outerElement.addEventListener("click", function (event) {
    event.stopPropagation();
    console.log("外层元素被点击了");
  });

  // 为内层元素添加点击事件监听器
  innerElement.addEventListener("click", function (event) {
    console.log("内层元素被点击了");
  });
</script>

以上代码的运行结果：

点击内层元素时，会依次打印"内层元素被点击了"，“外层元素被点击了”。
点击外层元素时，只会打印"外层元素被点击了"。

四、阻止默认行为

有些事件有默认行为（如点击链接会跳转，表单提交会发送数据），但在某些情况下，我们可能不希望这些默认行为发生，而是想执行一些自定义的操作。此时，可以在事件处理函数中使用event.preventDefault()方法来阻止事件的默认行为。

示例

1.阻止链接的默认跳转

<a href="https://www.example.com" id="myLink">点击我不会跳转到example.com</a>

<script>
  // 获取链接元素
  var link = document.getElementById("myLink");

  // 为链接添加点击事件监听器
  link.addEventListener("click", function (event) {
    // 阻止链接的默认跳转行为
    event.preventDefault();

    // 你的其他代码...
    alert("链接被点击了，但浏览器不会跳转。");
  });
</script>

2.阻止表单的默认提交行为

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />
  <br /><br />
  <input type="submit" value="提交" />
</form>

<script>
  // 获取表单元素
  var form = document.getElementById("myForm");

  // 为表单添加提交事件监听器
  form.addEventListener("submit", function (event) {
    // 阻止表单的默认提交行为
    event.preventDefault();

    // 校验表单数据
    if (form.name.value === "") {
      alert("姓名不能为空！");
      return;
    }

    // 你的其他代码，如通过AJAX提交表单数据等
    console.log("表单提交成功！");
  });
</script>

五、事件委托

事件委托是一种优化事件处理的技术，它利用事件冒泡的原理，只在父元素上设置事件监听器，然后通过事件对象的target属性来判断事件是否发生在特定子元素上，从而执行相应的处理函数。这种方法可以减少事件监听器的数量，提高性能，特别适用于大量子元素或动态内容较多的页面。

示例

例如，在一个列表中，可能有很多项（li元素），如果每项都绑定一个点击事件监听器，那么当列表项数量很多时，会严重影响性能。此时，可以使用事件委托，只在列表的父元素上绑定一个点击事件监听器，然后在事件处理函数中判断点击的是哪个列表项，并据此执行相应的操作，并且能够处理动态添加到DOM中的元素。

<ul id="myList">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <!-- 可以有更多或动态添加的 li 元素 -->
</ul>
<button id="addLi">添加更多列表项</button>

<script>
  // 获取 ul 元素
  var ul = document.getElementById("myList");

  // 为 ul 添加点击事件监听器
  ul.addEventListener("click", function (event) {
    // 检查点击事件的目标（target）是否为 li 元素
    if (event.target && event.target.nodeName === "LI") {
      // 是 li 元素，执行相应的操作
      event.target.style.backgroundColor = "pink"; // 例如，改变背景色
      console.log(event.target.innerText); // 打印点击的 li 元素的文本内容
    }
  });

  // 添加更多列表项的按钮点击事件
  document.getElementById("addLi").addEventListener("click", function () {
    var newLi = document.createElement("li"); // 创建一个新的 li 元素
    newLi.textContent = "新列表项 " + (ul.children.length + 1); // 设置 li 的文本内容
    ul.appendChild(newLi); // 将新的 li 元素添加到 ul 中
    // 注意：由于使用了事件委托，新添加的 li 元素自动具有点击事件效果
  });
</script>