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

Question

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

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

试试 liList[i].onclick = function(e) {console.log(e.currentTaget)}

e 将是您当前点击的项目。

Answer 2

使用'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>

Answer 3

var liList = document.querySelectorAll("li");

for (var i = 0; i < liList.length; ++i){
    liList[i].addEventListener("click", function() {
        this.classList.toggle("done");
    });
}

Answer 4

**This may be helpful for you**

  <script type="text/javascript">
    var liList = document.getElementsByTagName("li");
    for(var i=0; i<liList.length; i++){
     liList[i].addEventliListener("click", liClick);
    }
    function liClick(){
      this.classliList.toggle("done");
    }
    </script>

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

Javascript iterate through <li> list and assign event (onitemclick) handlers not working - why?

javascript

arrays

event-handling

dom-events