在带有 classList 的 querySelectorAll() 上添加EventListener [重复]

Question

我正在尝试添加事件侦听器，但没有结果。我知道 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);

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

Answer 1

代码和您提供的链接之间存在一些差异。里面没有功能

doit()

。

您已将

addEvenListener

附加到

NodeList

中的

cbox.addEventListener("click",.....

，您必须循环遍历列表并将事件附加到当前元素：

尝试以下操作：

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

 for (let i = 0; i < cbox.length; i++) {
     cbox[i].addEventListener("click", function() {
       cbox[i].classList.toggle("red");
     });
 }

*,
html,
body {
    padding: 0;
    margin: 0;
}

.box {
    width: 10rem;
    height: 10rem;
    background-color: yellowgreen;
    float: left;
    position: relative;
    margin: 0.5rem;
    transition: .5s all;
}

h3 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box:not(:first-child) {
    margin-left: 1rem;
}

.red {
    background-color: orangered;
}

<div id="box1" class="box box1">
    <h3>Box 1</h3>
</div>
<div id="box2" class="box box2">
    <h3>Box 2</h3>
</div>
<div id="box3" class="box box3">
    <h3>Box 3</h3>
</div>
<div id="box4" class="box box4">
    <h3>Box 4</h3>
</div>

Answer 2

ES6 使这变得更简单：

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

实现示例：

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

.box {
  width: 5rem;
  height: 5rem;
  background-color: yellowgreen;
  display: inline-block;
}

.box.red {
  background-color: firebrick;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 3

您可以在班级上使用

forEach

或使用事件委托。

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

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

事件委托

HTML：

<div id="parent">
  <div id="box1" class="box box1">
    <h3>Box 1</h3>
  </div>
  <div id="box2" class="box box2">
      <h3>Box 2</h3>
  </div>
  <div id="box3" class="box box3">
      <h3>Box 3</h3>
  </div>
  <div id="box4" class="box box4">
      <h3>Box 4</h3>
  </div>
</div>

JS部分：

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

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

事件委托要好得多，并且使用更少的资源，因为您只使用 1 个事件侦听器并且没有 for 循环。

Answer 4

我建议使用事件委托并在根级别创建单个委托侦听器，然后查找引发事件的匹配元素，而不是迭代多个元素并附加许多单独的侦听器。

document.body.addEventListener("click", function(e) {
  if (e.target.classList.contains("box")) {
    doit();
  }
})

进一步阅读

• window.EventTarget.prototype.addDelegatedListener

• 为同一个类的元素添加点击事件监听器
• 在 NodeList 上添加事件监听器