Javascript 遍历 <li> 列表并分配事件(onitemclick)处理程序不起作用 - 为什么？

Question

我在本练习中的任务是每当有人单击列表中的 li 项目时切换它们的“完成”属性。我找到了其他方法，但这个方法对我不起作用，我很想了解原因。我的代码有什么问题吗？是不是可以像这样分配处理程序，或者我的代码中的其他内容可能是错误的？

var liList = document.querySelectorAll("li");
for (var i = 0; i < liList.length; ++i){
    liList[i].onItemClick = function() {
    liList[i].classList.toggle("done");
    }
}

<ul>
   <li>Notebook</li>
   <li>Jello</li>
   <li>Spinach</li>
   <li>Rice</li>
   <li>Birthday Cake</li>
   <li>Candles</li>
</ul>

Answer 1

使用“onClick”而不是“onItemClick”

window.addEventListener('load', function() {
  document.querySelectorAll("li").forEach(function(v){
    v.addEventListener("click", function(e){
      e.target.classList.toggle("done");
    })
  })
})

li.done {
  color: green
}

<ul>
  <li>Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
</ul>