JS：for循环中为addEventListener传索引时出现未定义错误怎么办？

这个问题我太熟悉了！核心原因是你用var声明的变量i是函数级作用域，当mouseover事件触发的时候，循环早就跑完了，此时i的值已经变成了todos.length，自然就超出了trashShow数组的索引范围，所以才会报Cannot read property 'style' of undefined的错误。

下面给你几种简单有效的解决方案：

方案1：用let替换var（最推荐的ES6+写法） #

let是块级作用域变量，每次循环都会创建一个新的i绑定到当前迭代的数值，事件处理函数会捕获到当前循环的那个i值，而不是最后循环结束的i。修改后的代码如下：

for (let i = 0; i < todos.length; i++) { 
  console.log("XD"); 
  todos[i].addEventListener("mouseover", function() { 
    trashShow[i].style.display = "inline"; 
  }); 
}

方案2：利用闭包保存当前索引 #

如果你的环境还不能用ES6，就用立即执行函数表达式（IIFE）创建一个独立的作用域，把当前循环的i作为参数传递进去，这样事件处理函数就能拿到正确的索引了：

for (var i = 0; i < todos.length; i++) { 
  console.log("XD"); 
  (function(index) {
    todos[index].addEventListener("mouseover", function() { 
      trashShow[index].style.display = "inline"; 
    });
  })(i);
}

方案3：使用数组的forEach方法 #

forEach的回调函数会自动接收当前元素和索引，每个回调函数的作用域都是独立的，也能避免这个问题：

todos.forEach(function(todo, index) {
  console.log("XD");
  todo.addEventListener("mouseover", function() {
    trashShow[index].style.display = "inline";
  });
});

这三种方法都能解决你的问题，优先推荐方案1，代码最简洁易懂~

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