如何为数组中的每个元素添加EventListener事件监听器？

核心错误点 #

• 选择器语法错误
  document.querySelectorAll("heading") 传入的是CSS选择器，需按规则补充前缀：
  • 要选中类名为heading的元素：改为.heading
  • 要选中id为heading的元素：改为#heading（id全局唯一，无需用querySelectorAll）
  • 原生HTML不存在heading标签，若为自定义标签可保留原写法，请自行核对元素标识
• 代码执行时机错误
  如果JS代码在DOM节点渲染完成前执行，querySelectorAll会拿到空集合，循环不会生效，自然绑定不上事件。

修正后代码 #

// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function () {
  // 此处以类名为heading的元素为例，可根据实际需求修改选择器
  const headList = document.querySelectorAll(".heading");
  for (const head of headList) {
    head.addEventListener("click", function () {
      const subheading = document.getElementById("subheading");
      // 增加判空逻辑，避免元素不存在时抛出异常
      subheading && (subheading.style.display = "none");
    });
  }
})

可选优化方案 #

如果你的heading元素是动态生成的，或者数量较多，可以用事件委托的方式实现，不用逐个绑定事件，性能更好也能兼容动态新增的元素：

document.addEventListener('DOMContentLoaded', function () {
  // 替换为你所有heading元素的共同父容器选择器
  const parent = document.querySelector("#heading-parent");
  parent.addEventListener("click", function (e) {
    // 判断点击的元素是否为heading
    if (e.target.classList.contains('heading')) {
      const subheading = document.getElementById("subheading");
      subheading && (subheading.style.display = "none");
    }
  })
})

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