为什么document.querySelectorAll返回值调用addEventListener会报错

报错原因 #

document.querySelectorAll() 返回的是 NodeList 类数组集合，不是单个 DOM 元素对象，只有单个 DOM 元素才具备 addEventListener 方法，直接在集合对象上调用该方法就会抛出类型错误。你之前使用querySelector可以正常绑定，就是因为该API返回的是匹配到的第一个单个DOM元素。

另外你当前的选择器document.querySelectorAll('div')会选中页面所有div，包括顶部的结果显示条#calc、外层容器#container，这些元素不需要绑定点击事件，建议优化选择器缩小范围。

解决方案 #

方案1：遍历NodeList逐个绑定事件 #

遍历返回的所有按钮元素，分别给每个元素绑定点击监听：

// 优化选择器，只选中计算器按钮
let knopkes = document.querySelectorAll(`#container > div`);
let score = document.querySelector(`#calc`);

// 遍历所有按钮逐个绑定事件
knopkes.forEach(function(btn) {
  btn.addEventListener(`click`,function() {
    // 直接取当前点击按钮的文本内容，不需要单独声明每个按钮的变量
    score.textContent = this.textContent;
  });
})

方案2：使用事件委托（更推荐） #

直接给按钮的父元素#container绑定事件，利用事件冒泡机制统一处理所有子按钮的点击事件，性能更好，也支持后续动态新增按钮自动生效：

let score = document.querySelector(`#calc`);
document.querySelector(`#container`).addEventListener(`click`, function(e) {
  // 只处理点击按钮的场景
  if(e.target.tagName === 'DIV') {
    score.textContent = e.target.textContent;
  }
})

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