解开事件冒泡、事件捕获与事件委托之谜

前端

2023-12-18 05:41:05

浏览器中的事件传播：揭开 DOM 事件的奥秘

事件是 Web 开发中至关重要的组成部分，它们允许我们对用户交互进行响应。在浏览器中，事件遵循一个特定的传播模式，称之为 事件传播 。理解事件传播对于编写有效的 JavaScript 应用程序至关重要。

事件冒泡 vs. 事件捕获：两种事件传播方式

事件传播有两种主要形式：

事件冒泡： 事件从事件源（触发事件的元素）向上传播到祖先元素。这就像一个气泡从水底向上浮到水面。
事件捕获： 事件从根元素向下传播到子元素。这就像一个球从树顶掉落到地面。

事件委托：简化事件处理

事件委托 是利用事件冒泡的特性来简化事件处理的一种技术。通过在父元素上添加一个事件处理函数，我们可以为该元素的所有子元素添加事件处理函数，而无需为每个子元素单独添加。

这是事件委托的工作原理：

事件发生在子元素上。
事件沿 DOM 树向上冒泡，触发父元素的事件处理函数。
如果父元素的事件处理函数能够处理该事件，则事件处理函数会被执行，事件传播将被阻止。
否则，事件会继续向上冒泡。

何时使用事件委托

事件委托非常适合以下情况：

为大量元素添加相同的事件处理函数。
为子元素添加事件处理函数，但子元素的类型或结构可能会发生变化。
在事件发生后对事件进行进一步处理。

代码示例：事件委托

以下代码示例演示了如何在 HTML 和 JavaScript 中使用事件委托：

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

document.getElementById("container").addEventListener("click", function(event) {
  var button = event.target;

  switch (button.id) {
    case "button1":
      alert("Button 1 clicked!");
      break;
    case "button2":
      alert("Button 2 clicked!");
      break;
    case "button3":
      alert("Button 3 clicked!");
      break;
  }
});