使用querySelectorAll调用addEventListener报错：方法未定义求助

document.querySelectorAll(".my-text")返回的是NodeList节点集合，不是单个DOM元素。addEventListener是单个DOM元素的专属方法，直接在集合上调用自然会报错。另外原代码里的mytexts.style.color也有问题——集合本身没有style属性，必须操作集合里的单个元素。

方案1：遍历集合，给每个元素单独绑定事件 #

用forEach遍历NodeList，给每个元素绑定点击事件，通过this指向当前被点击的元素：

const mytexts = document.querySelectorAll(".my-text");

mytexts.forEach(text => {
  text.addEventListener("click", function(){
    this.style.color = "red";
  });
});

方案2：事件委托（更高效） #

利用事件冒泡机制，给父元素绑定一次事件，通过判断目标元素的类名来触发逻辑。这种方法不用遍历所有元素，后续动态添加的.my-text元素也能自动响应点击：

// 这里用body作为父容器，建议换成更贴近目标元素的父节点
document.body.addEventListener("click", function(e){
  if(e.target.classList.contains("my-text")){
    e.target.style.color = "red";
  }
});

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