JS错误对象没有addEventListener方法。

Question

我有以下代码：

var el = document.querySelectorAll('.block');
console.log(el);
el.addEventListener('click', function () {
    alert('hello');
}, false);

然而，它返回一个错误未捕获的类型错误：对象#<NodeList>没有方法'addEventListener'

我为什么会得到这个错误？我该如何解决这个问题？

- Om3ga

---

querySelectorAll 返回一个 Nodelist（类似于 DOM 节点的数组集合），您无法将事件侦听器附加到此集合。您需要循环它们并将事件处理程序附加到各个 DOM 节点。 - Mark Walters

Answer 1

方法 querySelectorAll() 返回一个节点列表（NodeList），其中包含多个节点。

因此，您需要迭代它以附加事件侦听器。

var el = document.querySelectorAll('.block');
for(var i=0; i < el.length; i++){
    el[i].addEventListener('click', function () {
        alert('hello');
    }, false);
}

- Satpal

Answer 2

因为，就像错误信息告诉你的那样，NodeList 没有 addEventListener 方法。你应该遍历 nodelist，并对每个元素添加 addEventListener - 假设你想添加 N 个监听器。

或者，仅选择单个元素，那么你的代码其余部分将按照原样工作。

- Matt Ball