Javascript 在具有类列表的querySelectorAll（）上添加EventListener

我正在尝试添加事件侦听器，但没有结果。我知道JavaScript有一个提升功能，但我相信除了正确的解决方案之外，我已经尝试了所有方法

const cbox = document.querySelectorAll(".box");
function doit() {
  for (let i = 0; i < cbox.length; i++){
    cbox[i].classList.add("red");
  }
}
cbox.addEventListener("click", doit, false);

const cbox=document.queryselectoral（“.box”）；
函数doit（）{
for（设i=0；i

---

有人能发现我犯的错误吗？

代码和您提供的链接之间有一些不同之处。其中没有函数

doit（）

。您已将

addEventListener

附加到

cbox.addEventListener中的
NodeList
（“单击“，…”

请尝试以下操作：

const cbox=document.queryselectoral（“.box”）；
for（设i=0；i

*，
html，
身体{
填充：0；
保证金：0；
}
.盒子{
宽度：10雷姆；
高度：10雷姆；
背景颜色：黄绿色；
浮动：左；
位置：相对位置；
保证金：0.5雷姆；
过渡期：所有；
}
h3{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.box:非（：第一个孩子）{
左边距：1 em；
}
瑞德先生{
背景颜色：橙色；
}

方框1
方框2
方框3
方框4

您可以在课堂上使用

forEach

，也可以使用事件委派

const cboxes = document.querySelectorAll(".box");
function doit() {
    ... do something ...
}
cboxes.forEach(
  function(cbox) {
   cbox.addEventListener("click", doit,false);
  }
);

请注意，我更改了您的变量名

赛事调查

HTML:

---

事件委派更好，并且使用更少的资源，因为您只使用1个事件侦听器，不使用for循环。

ES6使这一点更简单：

document.querySelectorAll(".box").forEach(box => 
  box.addEventListener("click", () => box.classList.toggle("red"))
)

实施示例：

document.queryselectoral（“.box”）.forEach（box=>
box.addEventListener（“单击”，（）=>box.classList.toggle（“红色”））
)

.box{
宽度：5雷姆；
身高：5雷姆；
背景颜色：黄绿色；
显示：内联块；
}
.盒子，红色{
背景颜色：耐火砖；
}

为什么要在

doit（）

中使用循环来添加

red

类？因为querySelectorAll返回一个对象，所以我必须对其进行迭代？是的，它返回一个类似数组的对象。下一个问题是：为什么不使用循环来分配事件处理程序？；）您的意思是在处理程序内部运行for循环，还是相反？我两个都试过了。

.querySelectorAll（）

返回一个

节点列表

，它没有

.addEventListener（）

方法。您必须在列表中的每个项目上添加事件，方法与在类中添加事件的方法相同。虽然此代码可以回答问题，但提供有关如何和/或为什么解决问题的附加上下文将提高答案的长期价值。

.querySelectorAll（）

不返回

HTMLCollection

而是返回

节点列表

，因此，如果它是某种列表，则意味着我们也可以在元素cbox上使用foreach循环。@EvangelosK.，是的，您是对的。您必须使用循环将事件侦听器附加到每个元素…谢谢。谢谢。但就性能而言，如果阵列中有20个项目，该事件是否会触发20次？每个元素一个。？

cboxes.forEach（）

不适用于IE:

Array.prototype.forEach！==NodeList.prototype.forEach

easy polyfill fix使forEach工作在这是一个使用ES6符号的更干净的解决方案

const parent = document.querySelector("#parent");

parent.addEventListener('click', (e) => {
  e.target.classList.add('red');
  console.log(e.target);
});

document.querySelectorAll(".box").forEach(box => 
  box.addEventListener("click", () => box.classList.toggle("red"))
)