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

This question already has answers here:

JavaScript closure inside loops – simple practical example
                                
                                    （44个回答）
                                
                        
                        
                            How to generate event handlers with loop in Javascript? [duplicate]
                                
                                    （3个答案）
                                
                        
                3个月前关闭。
            
        

在此练习中，我的任务是每当有人单击时，切换列表中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>

最佳答案

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

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