為什么單擊事件偵聽器只工作一次

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"
}