为li元素添加addEventListener报错：TypeError: i.getAttribute is not a function

错误原因 #

你编写的事件处理函数中，参数名使用了i，这个i实际上是事件对象（Event），而非循环里的<li>元素。事件对象并不具备classList、getAttribute这类DOM元素的方法，因此调用时会触发TypeError。

修正方案 #

方案1：移除事件处理函数参数，用this指代当前元素

var items = document.getElementsByClassName('item');

for (i of items) {
    i.addEventListener("click", function() {
        this.classList.add("selected");
    })
}

方案2：修改参数名，用e.target获取触发事件的元素

var items = document.getElementsByClassName('item');

for (i of items) {
    i.addEventListener("click", function(e) {
        e.target.classList.add("selected");
    })
}

方案3：用let声明循环变量（可选优化）

如果担心循环变量的作用域问题，可以用let声明i，确保每次循环的i都是独立的：

var items = document.getElementsByClassName('item');

for (let i of items) {
    i.addEventListener("click", function() {
        i.classList.add("selected");
    })
}

内容的提问来源于stack exchange，提问作者emanuel