迹忆客 专注技术分享

事件委托是一种基于事件冒泡概念的模式。 它是一种事件处理模式，允许我们在 DOM 树中的更高级别处理事件，而不是首次接收到事件的级别。

事件传播简介

默认情况下，在元素上触发的事件会在 DOM 树中向上传播到元素的父元素、它的祖先，并一直传播到根元素 (html)。

看这个例子：

<div>
  <span>
    <button>点我!</button>
  </span>
</div>

这里我们有一个 div，它是 span 的父元素，而 span 又是 button 元素的父元素。

由于事件冒泡，当按钮接收到一个事件时，比如点击，该事件会在树上冒泡，因此 span 和 div 也会分别接收到该事件。

如果你想更详细地了解事件冒泡，你可以在这里阅读我们的文章。

事件委托如何工作？

使用事件委托，我们可以在 div 上处理它，而不是处理按钮上的点击事件。

这个想法是我们将事件的处理“委托”给不同的元素（在本例中为 div，它是父元素）而不是接收事件的实际元素（按钮）。

看下面的代码：

const div = document.getElementsByTagName("div")[0]

div.addEventListener("click", (event) => {
  if(event.target.tagName === 'BUTTON') {
    console.log("button was clicked")
  }
})

事件对象有一个目标属性，它包含有关实际接收事件的元素的信息。 在 target.tagName 上，我们获取元素的标签名称，并检查它是否为 BUTTON。

使用此代码，当我们单击按钮时，事件会冒泡到处理该事件的 div。

事件委托的好处

事件委托是一种有用的模式，可让我们编写更清晰的代码，并创建更少的具有相似逻辑的事件侦听器。

这是什么意思？ 看看这段代码：

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

这里我们有 3 个按钮。 假设我们想处理每个按钮上的点击事件，这样当它被点击时，按钮的文本就会被记录到控制台。 我们可以这样实现：

const buttons = document.querySelectorAll('button')

buttons.forEach(button => {
  button.addEventListener("click", (event) => {
    console.log(event.target.innerText)
  })
})

我在这里使用 querySelectorAll ，因为它返回一个我可以使用 forEach 方法的 NodeList 。 getElementsByTagName 返回一个没有 forEach 方法的 HTMLCollection。

当我们单击第一个按钮时，控制台上会记录“Button 1”。 对于第二个按钮，记录“Button 2”，对于第三个按钮，记录“Button 3”。

虽然这可以按我们的意愿工作，但我们已经为三个按钮创建了三个事件侦听器。

由于这些按钮上的点击事件在 DOM 树中向上传播，我们可以使用它们必须处理事件的公共父级或祖先级。 在这种情况下，我们委托一个他们共享的共同父代来处理我们想要的逻辑。

就是这样：

const div = document.querySelector('div')

div.addEventListener("click", (event) => {
  if(event.target.tagName === 'BUTTON') {
    console.log(event.target.innerText)
  }
})

现在，我们只有一个事件侦听器，但逻辑相同：当我们单击第一个按钮时，“Button 1”将记录到控制台，其他按钮也是如此。

即使我们像这样添加一个额外的按钮：

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

我们不必更改 JavaScript 代码，因为这个新按钮还与其他按钮共享 div 父级（我们委托事件处理）。

总结

通过事件委托，我们可以创建更少的事件侦听器并在一处执行类似的基于事件的逻辑。 这使我们可以更轻松地添加和删除元素，而无需添加新的或删除现有的事件侦听器。

由于 DOM 中的事件传播，事件委托成为可能，其中子元素接收的事件也传递给子元素的父元素和祖先元素。 同样，我们可以在此处阅读有关事件冒泡的更多信息。