为什么单击事件侦听器只工作一次

Question

我希望在单击任何 li 元素时执行 function 。 我怎样才能做到这一点？

 var listItem = document.getElementById("listItem"); listItem.addEventListener("click", clickTodo) function clickTodo() { listItem.style.color = "red" }

 ul li { cursor: pointer; }

 <ul> <li id="listItem">One</li> <li id="listItem">Two</li> <li id="listItem">Other</li> </ul>

Answer 1

ID 必须是唯一的，并且一个元素上的 eventListener 仅适用于一个元素

建议从最近的 static 容器委托

额外的好处，您可以添加新的 TODO 并且单击仍然有效

我还建议您使用 CSS 并切换 class

 var list = document.getElementById("list"); list.addEventListener("click", clickTodo) function clickTodo(e) { const tgt = e.target; if (tgt.classList.contains("listItem")) tgt.classList.toggle("red"); }

 ul li { cursor: pointer; }.red { color: red; }

 <ul id="list"> <li class="listItem">One</li> <li class="listItem">Two</li> <li class="listItem">Other</li> </ul>

Answer 2

您不应该有多个具有相同 ID 的元素。 您应该改用 class。

然后，您可以 select 使用document.querySelectorAll的所有元素并向每个元素添加事件侦听器。

 document.querySelectorAll('ul > li.listItem').forEach(li => li.addEventListener('click', clickTodo)); function clickTodo() { this.style.color = "red" }

 ul li { cursor: pointer; }

 <ul> <li class="listItem">One</li> <li class="listItem">Two</li> <li class="listItem">Other</li> </ul>

Answer 3

listItem应该是class而不是id来对所有li元素进行分组。 然后，使用forEach将事件侦听器添加到每个项目，如下所示：

 const listItems = document.getElementsByClassName("listItem"); [...listItems].forEach(listItem => listItem.addEventListener("click", clickTodo) ); function clickTodo() { this.style.color = "red" }

 ul li { cursor: pointer; }

 <ul> <li class="listItem">One</li> <li class="listItem">Two</li> <li class="listItem">Other</li> </ul>

Answer 4

并且 id 应该是唯一的并用于单个元素。 如果你想 select 多个元素，你应该使用 class 代替。 但在这种情况下，您可以直接使用 select 元素：

document.querySelectorAll('li').forEach(li => 
    li.addEventListener('click', clickTodo));

function clickTodo() {
  this.style.color = "red"
}