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

Question

我希望在单击任何 li 元素时执行该函数。我该怎么做？

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 的元素。您应该改用 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 2

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 3

ID 必须是唯一的，并且一个元素上的 eventListener 仅对一个元素有效

建议从最近的静态容器委托

增加了好处，您可以添加新的 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 4

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

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

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

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

Why click event listener just once working

html

javascript

click

addeventlistener