DOM 事件及事件委托：打破层层嵌套，提升代码效率

前端

2023-11-17 12:12:33

事件委托：简化 DOM 事件处理的利器

事件处理：用户交互的关键

在 Web 开发中，事件处理扮演着举足轻重的角色。它使我们能够响应用户的鼠标点击、键盘输入等行为，并动态更新网页内容。DOM（文档对象模型）事件模型为我们提供了强大的工具，让我们可以检测和处理页面元素上的用户交互。

嵌套元素的挑战

然而，当页面元素嵌套复杂时，事件处理就会变得繁琐且难以管理。试想一下一个包含数百个嵌套元素的复杂表单。为每个元素添加事件监听器将是一项巨大的任务，并且会显著降低页面的性能和可维护性。

事件委托的登场

这就是事件委托大显身手的时候了。事件委托是一种事件处理技术，通过将事件监听器附加到父元素而不是每个子元素上来提高效率。当子元素触发事件时，事件会沿着 DOM 树向上冒泡到父元素，在那里由监听器统一处理。

事件委托的好处

事件委托的好处显而易见：

减少内存消耗： 通过减少监听函数的数量，可以减轻浏览器的内存负担。
提高代码可维护性： 集中事件处理逻辑，便于管理和维护。
提高性能： 减少事件冒泡过程中的性能开销。

DOM 事件模型：事件流的幕后机制

要理解事件委托的工作原理，我们必须深入了解 DOM 事件模型。当一个事件发生时（例如，点击或鼠标悬停），它会触发一个事件对象。该对象包含有关事件详细信息的信息，例如目标元素和事件类型。

事件冒泡过程按以下顺序进行：

捕获阶段： 事件从目标元素向上传播到父元素，依次触发捕获阶段的事件监听函数。
目标阶段： 事件到达目标元素，触发目标阶段的事件监听函数。
冒泡阶段： 事件从目标元素向上传播到父元素，依次触发冒泡阶段的事件监听函数。

事件委托的应用：优雅处理嵌套元素

事件委托在处理嵌套元素时特别有用。考虑以下 HTML 代码：

<div id="parent">
  <div id="child1">...</div>
  <div id="child2">...</div>
</div>

如果我们想为每个子元素添加单击事件监听器，我们会得到以下代码：

const child1 = document.getElementById("child1");
const child2 = document.getElementById("child2");

child1.addEventListener("click", handleClick);
child2.addEventListener("click", handleClick);

function handleClick(event) {
  // 处理单击事件
}

这种方法会导致冗余的事件监听器和不必要的事件冒泡。相反，我们可以使用事件委托：

const parent = document.getElementById("parent");

parent.addEventListener("click", handleChildClick);

function handleChildClick(event) {
  // 检查目标元素是否是子元素
  if (event.target.id === "child1" || event.target.id === "child2") {
    // 处理单击事件
  }
}

通过将事件监听器附加到父元素，我们有效地简化了事件处理逻辑，减少了事件冒泡，并提高了代码的可维护性。

代码示例

以下是使用事件委托在嵌套元素上处理单击事件的代码示例：

<div id="parent">
  <div id="child1">按钮 1</div>
  <div id="child2">按钮 2</div>
</div>

<script>
  const parent = document.getElementById("parent");

  parent.addEventListener("click", (event) => {
    if (event.target.id === "child1") {
      console.log("点击了按钮 1");
    } else if (event.target.id === "child2") {
      console.log("点击了按钮 2");
    }
  });
</script>