时间戳

首页 > 解决方案 > 无法读取未定义的属性“添加事件侦听器”

javascript - 无法读取未定义的属性“添加事件侦听器”

问题描述

我设法做了一个 for 循环，以便我可以选择 div 中的所有按钮并将事件侦听器附加到它们。尽管网站上一切正常，但我在控制台中遇到错误：

“未捕获的 TypeError：无法读取 index.js:5 处未定义的属性‘addEventListener’”

我可以以某种方式修复此错误吗？

这是我在js中的代码：

let div = document.querySelector(".set");
let nodeList = div.querySelectorAll("button");

for (let i = 0; i <= nodeList.length; i++){
  nodeList[i].addEventListener("click", function(){
  alert("I got clicked!")
  });
}

标签： javascript

解决方案

  1. 您超出了列表 - 更改<=为<此处：i <= nodeList.length

  2. 所有最新的浏览器（Edge < 17 除外）都可以使用 forEach： document.querySelectorAll(".set button").forEach(but => but.addEventListener(...))

  3. 你最好不要循环而是委托

document.querySelector(".set").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName === "BUTTON") { // assuming buttons have no other tags inside
    alert("I got clicked!");
  }
});


|| tgt.parentNode.tagName==="BUTTON"如果您的按钮包含标签，您可以通过添加到测试来测试上一级

推荐阅读