JavaScript事件委托报错：thumbs.addEventListener不是函数求助

嘿，我一眼就看出问题出在哪了——咱们来快速搞定它！

错误原因 #

你用了document.querySelectorAll("#thumbnails")，这个方法会返回一个NodeList（节点集合），哪怕页面上只有一个匹配#thumbnails的元素，它也会把这个元素放进集合里返回。而addEventListener是单个DOM元素独有的方法，集合本身没有这个方法，所以浏览器才会抛出这个报错。

解决方案 #

因为id在页面里是唯一的，你只需要获取单个父元素就行，有两种简单的方式：

方法1：使用getElementById（最适合id选择的原生方法）

修改你的JS代码如下：

window.addEventListener("load", function() {
  var thumbs = document.getElementById("thumbnails");
  thumbs.addEventListener("click", function(e) {
    // 这里可以补充你的事件委托逻辑，比如判断点击目标是图片
    if(e.target.tagName === "IMG") {
      console.log("点击了图片：", e.target.title);
    }
  });
});

方法2：使用querySelector

如果更习惯CSS选择器语法，也可以用querySelector，它会返回匹配选择器的第一个元素（这里就是唯一的#thumbnails容器）：

window.addEventListener("load", function() {
  var thumbs = document.querySelector("#thumbnails");
  thumbs.addEventListener("click", function(e) {
    // 同样可以添加你的事件处理逻辑
    if(e.target.matches("img")) {
      console.log("点击了图片：", e.target.title);
    }
  });
});

额外小提示 #

如果以后你真的需要给多个同类型元素添加事件（比如多个class相同的元素），那querySelectorAll返回的NodeList可以用forEach循环批量处理：

var elements = document.querySelectorAll(".some-class");
elements.forEach(function(el) {
  el.addEventListener("click", function() {
    // 这里写元素的点击逻辑
  });
});

你的HTML代码完全没问题，不需要修改~

内容的提问来源于stack exchange，提问作者Larry Haufle