在多个元素中添加 onclick 事件 - JavaScript

在 JavaScript 中，我们可以通过添加 onclick 属性来为元素添加点击事件。但是，如果我们想为多个元素添加相同的点击事件，一个个添加显然是不可取的。在这篇文章中，我们将学习如何使用 JavaScript 在多个元素中添加 onclick 事件。

使用循环为多个元素添加 onclick 事件

我们可以使用循环遍历每个元素并为其添加 onclick 事件。以下是一个示例代码：

const elements = document.querySelectorAll('.clickable');

elements.forEach(element => {
  element.onclick = function() {
    console.log('你点击了一个元素！');
  };
});

上面的代码首先使用 document.querySelectorAll 方法获取所有类名为 .clickable 的元素，将其保存在 elements 变量中。然后使用 forEach 方法循环遍历每个元素，并为其添加 onclick 事件。

现在，每当您单击一个具有 .clickable 类的元素时，会将消息“你点击了一个元素！”记录在控制台上。您还可以根据需要更改事件处理程序的功能。

还可以使用事件委托来添加 onclick 事件

事件委托是一种将事件处理程序添加到父级元素的技术。然后，当子元素触发事件时，事件将通过“冒泡”机制传递到父元素，从而触发父元素上的事件处理程序。这种方法适用于动态创建的元素，例如由 Ajax 加载的内容。

以下是使用事件委托为多个元素添加 onclick 事件的示例代码：

document.addEventListener('click', function(event) {
  if (event.target.matches('.clickable')) {
    console.log('你点击了一个元素！');
  }
});

上面的代码将事件处理程序添加到文档上，当单击文档中任何元素时，它将检查单击的元素是否具有 .clickable 类。如果是，则会将消息“你点击了一个元素！”记录在控制台上。

总结

通过使用循环或事件委托，我们可以轻松地在多个元素中添加 onclick 事件。这使得为大量元素添加相同的事件处理程序变得更加容易和高效。