事件传播和委派如何在JavaScript中起作用-DEV365 开发者社区

在JavaScript中，事件从文档对象模型（DOM）树传播并通过。这通常称为事件传播，分为两个阶段：捕获和冒泡。事件通过触发此类事件的目标元素的父元素的事实可以帮助您决定在哪里处理这些事件。这被称为事件代表团。在本文中，您将了解事件传播和授权如何在JavaScript中起作用以及如何有效地使用它们来处理页面上的事件。

什么是事件？

JavaScript事件是触发页面上某些行为的动作或事件。然后，开发人员可以通过附加称为事件侦听器的函数来聆听JavaScript中的这些事件。 JavaScript中事件的示例包括；单击事件，用户单击网页中的元素；提交事件，如果用户提交表格，页面加载；键盘事件，用户在其中选择键盘上的键。有关事件的更多信息，请参阅此https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

事件传播

JavaScript中的事件传播是指事件如何传播文档对象模型（DOM）树。一旦事件触发，这种行为就可以比喻为穿过DOM树的电流。事件传播有两个阶段。捕获和冒泡。

事件传播的捕获阶段

当事件触发或触发时，窗口对象首先通知事件，然后随后进行文档元素以及目标元素的后续父元素。此过程称为事件捕获。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" href="style.css" rel="stylesheet" />
    <title>TODO LIST</title>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li>Read a book</li>
        <li>Finish writing my article</li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

document.querySelector("li").addEventListener("click", function () {
  alert("My todo list!");
});

在上面的示例中，ul元素是li元素的父元素。 div元素也是ul元素的父元素。它像这样继续延伸到DOM树的顶部以及窗口对象本身。当在li元素上触发诸如点击事件之类的事件时，首先将窗口对象提醒或通知事件。然后，它向下传播目标元素的每个母体元素，直到达到目标元素。在已通知目标元件的事件之后，开始事件传播的第二阶段，也称为事件冒泡。

事件传播的起泡阶段

一旦将目标元素告知事件，该事件将再次传播到DOM树的根。就像在捕获阶段一样，该事件通过其所有父元素。此过程称为事件冒泡。因此，作为一个事件“通过其父元素泡泡，就好像事件是在该元素中触发的。在上面的代码中，一旦将li元素提醒事件，事件就会通过ul元素（div元素）向上传输，将父元素返回到dom的根。通常，事件总是在目标或冒泡阶段进行处理。但是，可以以捕获阶段聆听事件的方式来设置事件听众。重要的是要注意，并非所有事件都有捕获阶段。某些事件，例如焦点事件，是在目标元素上生成的，只能在此处处理。

事件.StopPropagation（）方法

在本文中，您已经看到了活动如何捕获和冒泡的工作。但是，您的代码中有时您可能不希望事件发生气泡。在这种情况下，您可以使用e.stopPropagation()方法。此方法可防止目标元素中触发的事件冒泡。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO LIST</title>
    <style>
      body {
        background-color: violet;
      }
      .ul {
        border: 2px solid blue;
        border-radius: 5px;
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 70px;
      }
      ul {
        background: rgb(214, 230, 222);
        padding: 20px;
      }
      ul li {
        background: rgb(217, 230, 212);
        color: black;
        margin: 5px;
      }

      .list {
        background: rgb(21, 75, 75);
      }
    </style>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li>Read a book</li>
        <li>Finish writing my article</li>
      </ul>
    </div>

    <script>
      // Target element
      document.querySelector("li").addEventListener("click", function () {
        alert("My todo list!");
      });

      // Parent element
      document.querySelector("ul").addEventListener("click", function () {
        this.style.background = "red";
      });
    </script>
  </body>
</html>

在上面的代码中，addEventListener()函数附加到li元素及其父元素ul。当单击li元素时，随着事件冒泡在其父函数之前附加的函数执行。

我们可以通过添加e.stopPropagation()方法来防止这种情况发生。然后，这将防止在单击目标元素时事件传播。

// Target element
      document.querySelector("li").addEventListener("click", function (e) {
        e.stopPropagation();
        alert("My todo list!");
      });

事件代表团

事件授权本质上是使用事件泡泡来处理事件在事件触发的目标元素的任何一个母元素上处理事件的知识。据说事件已授予目标元素的父元素，因此可以在该元素上处理它们。

如何在JavaScript中使用事件委托

当您想在代码中使用事件委托时，您需要做两件事。首先，您将事件侦听器函数添加到父元素中。完成此操作后，下一步是找出触发事件的元素。活动代表团有很多好处，其中之一是帮助提高您的代码性能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TODO LIST</title>
    <style>
      body {
        background-color: violet;
      }
      .ul {
        border: 2px solid blue;
        border-radius: 5px;
        margin: auto;
        width: 50%;
        padding: 10px;
        margin-top: 70px;
      }
      ul {
        background: rgb(214, 230, 222);
        padding: 20px;
      }
      ul li {
        background: rgb(217, 230, 212);
        color: black;
        margin: 5px;
      }

      .list {
        background: rgb(21, 75, 75);
      }
    </style>
  </head>
  <body class="bg-blue-200">
    <div class="ul">
      <ul class="list">
        <li class="l1 li">Read a book</li>
        <li class="l2 li">Finish writing my article</li>
        <li class="l3 li">Draft my resume</li>
      </ul>
    </div>

    <script>
      // Parent element
      document.querySelector("ul").addEventListener("click", function (e) {
        const target = e.target;
        if (target.classList.contains("li")) {
          target.style.background = "red";
        }
      });
    </script>
  </body>
</html>

在上面的代码中，您会注意到addEventListener()函数已添加到li元素的父类中。事件对象的target属性已被访问并存储到target变量中。然后，这用于检查目标元素是否包含一类li。如果是正确的话，则在单击目标元素时，if块中的代码执行。

结论

总而言之，本文试图更多地了解JavaScript中的事件传播和代表团以及它们的工作方式。事件传播及其两个阶段：捕获和冒泡，描述事件在目标元素上触发的文档对象模型（dom）树时如何在目标元素上发射时，事件授权是您可以使用事件通过的知识DOM树在相关目标元素的任何父元素上处理事件。此外，您可以决定使用e.stopPropagation()方法来停止事件的传播。

目录

先决条件

介绍