使用querySelectorAll后添加addEventListener无效果，求排查错误

嘿，我太懂这种明明代码看起来没问题但就是没效果的挫败感了！咱们来拆解下你的代码问题：

核心错误：给集合而非单个元素加事件监听器 #

你用document.querySelectorAll(".box")获取到的是一个NodeList（元素集合），而不是单个DOM元素。这个集合本身并没有addEventListener方法，所以你直接写cbox.addEventListener(...)根本不会生效，甚至在控制台会悄悄报错哦。

两种修复方案 #

方案1：遍历集合给每个元素单独加事件

这是最直接的方式，遍历你拿到的所有.box元素，给每一个都绑定点击事件：

const cbox = document.querySelectorAll(".box"); 

function doit() {
  // 如果是想给当前点击的元素加red样式，用this更精准
  this.classList.add("red");
  // 如果你确实需要点击任意一个box就让所有box变红，就保留原来的遍历逻辑：
  // for (let i = 0; i < cbox.length; i++){
  //   cbox[i].classList.add("red");
  // }
} 

// 遍历每个box元素，绑定事件
for (let i = 0; i < cbox.length; i++){
  cbox[i].addEventListener("click", doit, false); 
}

方案2：用事件委托（更高效，适合动态元素场景）

如果你的.box元素是动态生成的（比如后续通过JS添加），事件委托会更省心——只需要给父元素绑定一次事件，利用事件冒泡来处理：

// 假设所有.box的父元素是body，也可以换成实际的父容器选择器
document.body.addEventListener("click", function(e) {
  // 判断点击的目标是不是.box元素
  if (e.target.classList.contains("box")) {
    e.target.classList.add("red");
    // 同样，如果要所有box变红，就把这里换成遍历cbox的逻辑
  }
});

额外小提示 #

原来的doit函数里是给所有.box加red样式，如果你本来的需求是点击哪个就给哪个加样式，那用this或者e.target会更符合预期，不然点任意一个所有盒子都会变红哦～

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