JavaScript 事件代理：巧用 DOM 元素提高效率

2024-01-26 16:01:02

在编程世界中，"代理"的概念就像我们生活中的乐于助人者，当我们有事情需要处理时，他们会热情地伸出援手。而 JavaScript 中的事件代理也扮演着类似的角色。

考虑这样一个场景：在一个网页中，我们有一系列数据行，每行都有一个 "删除" 按钮。如果我们逐个为每个按钮添加事件监听器，这将非常繁琐和低效。JavaScript 事件代理为我们提供了一种巧妙的解决方案，让我们可以为父元素（例如包含所有数据行的表格）添加一个监听器，而不仅仅是为每个按钮添加监听器。

当一个事件在子元素（例如 "删除" 按钮）上触发时，它会冒泡到父元素。事件代理监听器会拦截这个冒泡事件，并检查目标元素是否与我们感兴趣的元素（即 "删除" 按钮）匹配。如果匹配，则可以触发相应的处理函数。

这种代理方法带来了几个好处：

提高效率： 它减少了事件监听器的数量，从而提高了性能。
易于维护： 在添加或删除按钮时，我们只需维护单个事件监听器，而不是为每个按钮单独维护。
可重用性： 事件代理可以轻松应用于其他类似场景，例如监听动态添加的元素上的事件。

让我们用一个简单的例子来演示 JavaScript 事件代理：

<table id="data-table">
  <tr>
    <td>数据 1</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
  <tr>
    <td>数据 2</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
  <tr>
    <td>数据 3</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
</table>

// 父元素（表格）的事件代理监听器
document.getElementById("data-table").addEventListener("click", function(e) {
  // 检查目标元素是否为 "删除" 按钮
  if (e.target.classList.contains("delete-btn")) {
    // 触发处理函数
    handleDeleteClick(e.target);
  }
});

// 处理函数
function handleDeleteClick(btn) {
  // 找到要删除的数据行
  const row = btn.parentNode.parentNode;

  // 删除数据行
  row.parentNode.removeChild(row);
}