深度理解事件流和DOM事件流的工作原理

最新推荐文章于 2024-01-23 18:59:37 发布

小猫娃来啦

最新推荐文章于 2024-01-23 18:59:37 发布

阅读量430

点赞数 28

分类专栏： JS高阶篇文章标签： javascript 前端开发语言 1024程序员节

本文链接：https://blog.csdn.net/dyk11111/article/details/134074956

版权

JS高阶篇专栏收录该内容

10 篇文章 5 订阅

订阅专栏

在这里插入图片描述

🤨博主：小猫娃来啦
🤨文章核心：深度理解事件流和DOM事件流的工作原理

文章目录

大家钓过鱼没？
事件流和DOM事件流的概念
三种事件流模型
DOM事件流的三个阶段
代码示例
事件流的应用场景
扩展：事件流在现代Web开发中的意义
完整代码举例
总结

大家钓过鱼没？

大家好，我是小猫娃。理解本文讲的东西，我们先看看钓鱼是咋回事。

🐟首先我们在鱼钩上弄点鱼饵，然后扔到水里，你就一直等。（准备捕获一条大鱼）

🐟正在此时，突然，鱼鳔动了，鱼上钩了。但是此时不能直接拉钩，鱼可能是在试探，得让鱼吃一会，吃差不多了，鱼咬住钩了，它会感到疼，然后摇摆，此时鱼鳔会剧烈抖动。（让鱼吃一会）

🐟拉杆，鱼慢慢从水里上来，水面上会有好多泡泡。（鱼出水，并冒泡）

知道钓鱼咋回事了，再往下看，你就秒懂。

事件流和DOM事件流的概念

事件流描述了在文档中触发的事件如何传播的过程，而DOM事件流则是其中一种模型。理解事件流对于开发交互式Web应用程序非常重要，因为它影响了事件处理程序的执行顺序和触发的顺序。

三种事件流模型

在现代浏览器中，常见的事件流模型包括冒泡事件流、捕获事件流和DOM事件流。

冒泡事件流

冒泡事件流是从最具体的元素开始触发，然后逐步向上向上传播到较为不具体的元素。当某个元素上发生事件时，事件会首先触发该元素上的事件处理程序，然后依次向上触发其父元素的事件处理程序，以此类推，直到到达DOM树的根节点。

捕获事件流

与冒泡事件流相反，捕获事件流是从DOM树的根节点开始，然后逐级向下传递到最具体的元素。在捕获事件流模型中，事件首先触发根节点上的事件处理程序，然后依次向下触发其子元素的事件处理程序，直到触发目标元素上的事件处理程序。

DOM事件流

DOM事件流是一种综合了冒泡事件流和捕获事件流的事件传播模型。它由事件捕获阶段、处于目标阶段和冒泡阶段组成。

DOM事件流的三个阶段

事件捕获阶段

在事件捕获阶段，事件从DOM树的根节点开始传播，逐级向下，直到到达目标元素之前。此阶段可以在目标元素触发之前拦截事件并执行特定的处理程序。

处于目标阶段

一旦事件到达目标元素，进入处于目标阶段。在这个阶段，与事件关联的处理程序将被执行。

冒泡阶段

在冒泡阶段，事件从目标元素开始逐级向上传播，直到到达DOM树的根节点。在这个阶段，与事件关联的处理程序将按照由具体到不具体的顺序执行。

关于事件冒泡，本人之前有一篇文章说的很细，感兴趣可以看一手：
事件冒泡学个透

代码示例

以下是一个简单的代码示例，说明了DOM事件流的三个阶段：

const container = document.getElementById("container");
const button = document.getElementById("button");

container.addEventListener("click", function(event) {
  console.log("捕获阶段 - 容器");
}, true);

button.addEventListener("click", function(event) {
  console.log("处于目标阶段 - 按钮");
});

container.addEventListener("click", function(event) {
  console.log("冒泡阶段 - 容器");
},);

上述代码中，我们首先在容器元素上注册了一个事件捕获处理程序，输出"捕获阶段 - 容器"。然后，在按钮元素上注册了一个处于目标阶段的事件处理程序，输出"处于目标阶段 - 按钮"。最后，在容器元素上注册了一个事件冒泡处理程序，输出"冒泡阶段 - 容器"。

事件流的应用场景

事件流模型在Web开发中有广泛应用，特别是在交互式页面中。通过理解事件流，我们可以更好地处理各种用户操作和交互行为。

一个常见的应用场景是在表单验证过程中使用事件流模型。例如，当用户点击提交按钮时，可以通过捕获事件流在提交之前验证表单输入数据的有效性。通过处于目标阶段执行验证逻辑，我们可以根据用户输入的内容检查表单字段是否符合预期。最后，使用冒泡事件流，我们可以在提交之后执行一些后续的操作，比如发送数据到服务器或显示一个成功的消息。

扩展：事件流在现代Web开发中的意义

在现代Web开发中，事件流模型仍然发挥着重要的作用。随着单页面应用程序的兴起，以及大量的前端框架和库的应用，事件流可用于组件之间的通信和状态管理通过事件流，不同的件可以监听特定事件并作出相应的响应。这种松散耦合的通信机制使得组件之间的交互和数据传递更加灵活。例如，一个按钮点击事件可以被多个组件监听并执行不同的操作。这种模式使得前端应用程序更易于扩展和维护。

另一个应用是事件委托。事件委托是一种将事件处理程序绑定到父元素上，然后根据事件目标来执行不同操作的技术。通过使用事件委托，我们可以在动态生成的元素或大量元素上轻松地绑定事件。这样可以减少DOM操作的次数，提高性能，并且可以更好地处理未来添加的元素。

事件流模型还可以帮助开发人员在用户界面上创建复杂而直观的交互效果。通过设计合理的事件流，我们可以实现拖放、鼠标悬停、键盘快捷键等各种交互行为。这些功能不仅提高了用户体验，还增加了应用程序的交互性和功能性。

完整代码举例

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        text-align: center;
        line-height: 200px;
        cursor: pointer;
      }
      #button {
        width: 100px;
        height: 50px;
        background-color: lightgreen;
        margin-top: 20px;
        margin-left: 50px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="button">按钮</div>
    </div>
    
    <script>
      const container = document.getElementById("container");
      const button = document.getElementById("button");

      container.addEventListener("click", function(event) {
        console.log("捕获阶段 - 容器");
      }, true);

      button.addEventListener("click", function(event) {
        console.log("处于目标阶段 - 按钮");
      });

      container.addEventListener("click", function(event) {
        console.log("冒泡阶段 - 容器");
      });
    </script>
  </body>
</html>

上述代码是一个简单的HTML文件，包含了一个容器元素和一个按钮元素。通过代码示例中注册的事件处理程序，我们可以在控制台输出事件在DOM事件流的不同阶段触发时的输出结果。

总结

本文深入理解了事件流和DOM事件流的工作原理。我们介绍了三种事件流模型：冒泡事件流、捕获事件流和DOM事件流，并详细讨论了DOM事件流的三个阶段：事件捕获、处于目标和冒泡通过简单的代码示例，我们展示了如何使用事件监听来注册事件处理程序，并验证了DOM事件流的执行顺序。

我们还探讨了事件流在现代Web开发中的应用场景，包括组件通信和状态管理、事件委托以及创建复杂的交互效果。最后，我们提供了一个扩展的代码示例，进一步说明了事件流模型在实际开发中的应用。

通过深入理解和掌握事件流和DOM事件流的工作原理，作为程序员是可以更好地利用事件进行交互，提高Web应用程序的质量和用户体验的。

在这里插入图片描述

小猫娃来啦

关注

28
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
20
评论
深度理解事件流和DOM事件流的工作原理

大家好，我是小猫娃。理解本文讲的东西，我们先看看钓鱼是咋回事。🐟首先我们在鱼钩上弄点鱼饵，然后扔到水里，你就一直等。（**准备捕获一条大鱼**）🐟正在此时，突然，鱼鳔动了，鱼上钩了。但是此时不能直接拉钩，鱼可能是在试探，得让鱼吃一会，吃差不多了，鱼咬住钩了，它会感到疼，然后摇摆，此时鱼鳔会剧烈抖动。（**让鱼吃一会**）🐟拉杆，鱼慢慢从水里上来，水面上会有好多泡泡。（**鱼出水，并冒泡**）
复制链接

扫一扫