javascript-for循环-仅每秒事件侦听器工作一次

我对网页设计非常陌生，所以我确信我在这里做了一些愚蠢的事情，但我真的很好奇我做错了什么，我在网上学习我的课程，出于某种原因，我所创作的li的每一次迭代似乎都有我的事件监听器，我一辈子都不知道为什么。我假设这是我的任务，在添加事件侦听器时，我尝试更改为listObjects[I].classList.toggle，但如果我执行this.classList.adddone，它只是抛出了一个错误，不管多么奇怪，它工作得非常好。提前谢谢

var enterBtn=document.querySelectorAllbutton[0]； var cancelBtn=document.querySelectorAllbutton[1]； var ul=document.querySelectorul； var列表对象 函数addListtodo{ var li=document.createElementli； li.appendChilddocument.createTextNodetodo； ul.appendChildli； listObjects=document.querySelectorAllli； setListDone； } enterBtn.addEventListenerclick，函数{ var listData=document.querySelectorinput.value； AddListData； }; cancelBtn.addEventListenerclick，函数{ ul.innerHTML=； }; 函数setListDone{ 对于i=0；i您永远不会删除旧的事件侦听器，因此任何索引为偶数的事件都会被切换两次或四次，或者其他任何操作，并以与启动时相同的状态结束。如果您首先清除旧的事件侦听器，或者仅将它们添加到新创建的元素中，则问题将消失：

var enterBtn=document.querySelectorAllbutton[0]； var cancelBtn=document.querySelectorAllbutton[1]； var ul=document.querySelectorul； var列表对象 函数addListtodo{ var li=document.createElementli； li.appendChilddocument.createTextNodetodo； ul.appendChildli； listObjects=document.querySelectorAllli； setListDone； } enterBtn.addEventListenerclick，函数{ var listData=document.querySelectorinput.value； AddListData； }; cancelBtn.addEventListenerclick，函数{ ul.innerHTML=； }; 函数setListDone{ 对于i=0；i原因是您正在使用setListDone将单击分配给所有li。因此，当您添加第二个li时，它也会将单击指定给第一个li。因此，当您单击第一个li时，它将调用click两次。此外，如果您添加第三个li，则在第一个li单击时，它将调用click三次

要解决这个问题，您只需将新创建的li传递给setListDone，并按如下所示更新setListDone

function setListDone(li) {
  li.addEventListener("click", function() {
    this.classList.toggle("done");
  });
}

测试下面的完整代码

var enterBtn=document.querySelectorAllbutton[0]； var cancelBtn=document.querySelectorAllbutton[1]； var ul=document.querySelectorul； var列表对象 函数addListtodo{ var li=document.createElementli； li.appendChilddocument.createTextNodetodo； ul.appendChildli； listObjects=document.querySelectorAllli； setListDoneli； } enterBtn.addEventListenerclick，函数{ var listData=document.querySelectorinput.value； AddListData； }; cancelBtn.addEventListenerclick，函数{ ul.innerHTML=； }; 函数setListDoneli{ li.addEventListenerclick，函数{ this.classList.toggledone； }; } .完成{ 文字装饰：线条贯通； } 事項清單 进来 取消

---

每次向列表中添加项时，都会向每个项添加事件侦听器。这就是为什么一些事件会触发两次或更多

listObjects[i].addEventListener("click", function() {
  this.classList.toggle("done");
});

下面是简单的解决方案

每次向列表中添加元素时，只需将事件侦听器添加到单个事件侦听器

var enterBtn=document.querySelectorAllbutton[0]； var cancelBtn=document.querySelectorAllbutton[1]； var ul=document.querySelectorul； var列表对象 函数addListtodo{ var li=document.createElementli； li.appendChilddocument.createTextNodetodo； //在这里，您可以将侦听器添加到刚刚创建的列表项中 li.addEventListenerclick，函数{ this.classList.toggledone； }; ul.appendChildli； } enterBtn.addEventListenerclick，函数{ var listData=document.querySelectorinput.value； AddListData； }; cancelBtn.addEventListenerclick，函数{ ul.innerHTML=； }; .完成{ 文字装饰：线条贯通； } 事項清單 进来 取消

---

这看起来像是最简单的方法谢谢，我不知道添加多次会有问题，我只是假设它会覆盖以前的，以后会记住这一点。非常感谢。