事件处理与委托：提升前端交互

2023-11-20 01:07:39

在 Web 开发的互动世界中，事件处理扮演着至关重要的角色，赋予页面响应用户输入的能力。从鼠标点击到键盘输入，事件处理允许我们捕获用户行为并做出相应的反应。然而，当页面中存在大量元素时，事件处理可能会变得复杂且难以管理。这就是事件委托发挥作用的地方。

事件处理基础

事件处理的核心是 W3C 事件模型。当用户与页面交互时，浏览器会触发事件，例如 click、mousemove 或 keypress。这些事件包含有关触发事件的元素及其状态的详细信息。

为了捕获事件，我们可以使用以下两种主要方法：

元素级事件处理程序： 将事件处理程序直接附加到要侦听事件的元素上。例如：

<button onclick="handleClick()">Click Me</button>

DOM 事件监听器： 使用 addEventListener() 方法为元素动态添加事件处理程序。例如：

const button = document.getElementById("my-button");
button.addEventListener("click", handleClick);

target 与 currentTarget

在事件处理中，两个重要的概念是 target 和 currentTarget。target 是触发事件的元素，而 currentTarget 是当前正在处理事件的元素。在大多数情况下，target 和 currentTarget 相同。然而，在事件冒泡的情况下，target 和 currentTarget 可能不同。

事件冒泡

事件冒泡是事件处理中的一个关键概念。当事件触发时，它会从触发元素开始向上冒泡到祖先元素，直到到达文档根元素。在此过程中，每个祖先元素都可以捕获并处理事件。例如：

<div onclick="handleDivClick()">
  <button onclick="handleButtonClick()">Click Me</button>
</div>

当点击按钮时，handleClickButton() 事件处理程序将首先触发。然后，事件将冒泡到父 div 元素，并触发 handleDivClick() 事件处理程序。

取消冒泡

有时，我们可能希望阻止事件冒泡，这样事件就不会传播到祖先元素。我们可以使用 stopPropagation() 方法来实现这一点。例如：

button.addEventListener("click", (e) => {
  e.stopPropagation();
  handleClick();
});

自定义事件

自定义事件允许我们创建自己的事件类型，并为它们定义触发机制。我们可以使用 CustomEvent() 构造函数创建自定义事件，如下所示：

const myEvent = new CustomEvent("my-custom-event", {
  detail: {
    message: "Hello World!"
  }
});

事件委托

事件委托是一种优化事件处理的技术。它通过将事件处理程序附加到父元素（而不是子元素）来减少事件处理程序的数量。这可以提高性能，特别是在页面中有大量子元素时。

事件委托的工作原理是：当事件触发时，它会从 target 元素开始冒泡向上。当事件到达父元素时，与父元素关联的事件处理程序将触发，即使事件不是由父元素本身触发的。

例如：

<div id="container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

我们可以使用事件委托为 container div 添加一个事件处理程序，如下所示：

const container = document.getElementById("container");
container.addEventListener("click", (e) => {
  if (e.target.nodeName === "BUTTON") {
    handleClick(e.target);
  }
});