为什么 querySelectorAll 不允许 addEventListeners - Javascript

在 Javascript 中，querySelectorAll 是一个非常常用的 API，它可以帮助我们获取文档中所有指定选择器的元素。然而，与之对应的 addEventListener 却无法直接用于 querySelectorAll 返回的节点列表上。

问题根源

这个问题的根源在于 querySelectorAll 返回的是一个 Node List，而不是单个 Node 元素。Node List 确实类似于一个数组，但是它不是数组，缺少一些数组的方法和属性。因此，我们无法直接在 Node List 上运用 addEventListener 等方法。

解决方法

1. 遍历所有元素

我们可以通过遍历所有元素后分别为每个元素添加事件监听器来解决这个问题。具体实现如下：

const elements = document.querySelectorAll(selector);

elements.forEach((element) => {
  element.addEventListener('click', () => {
    console.log('clicked');
  });
});

这种方法可以解决问题，但是当元素数量较多时，会导致性能问题。

2. 使用事件代理

事件代理是一种常用的技巧，可以简单地为一个父元素添加一个事件监听器，然后在回调函数中判断该事件的目标元素是否是我们需要监听的元素。如果是，则执行相应的操作。实现如下：

const parent = document.querySelector('.parent');

parent.addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log('clicked');
  }
});

这种方法能够极大地简化代码，并且有效地避免了性能问题。但是在使用时需要格外注意目标元素的选择，以免误触发事件。

结论

虽然 querySelectorAll 不允许直接使用 addEventListener，但是我们可以使用上述两种方法来解决这个问题。需要根据实际情况选择不同的方法，以取得最佳效果。