javascript - IE11 上的 addEventListener 未传递参数

Question

for(let i = 0; i <= todosToday.length - 1; i++) {
  const a = document.createElement("a");

  a.addEventListener("click", function() {
    showFoundTodo(todosToday[i]);
  });

}

这适用于 Chrome，但不适用于 IE，特别是 IE11。当我在 click 事件中附加函数 showFoundTodo 时，i 上的数组 todosToday 实例未传递。

function showFoundTodo(todo) {
   console.log(todo);
}

此函数打印出undefined，从而使参数无法使用。在 Chrome 上，它输出到对象没有任何问题。

我检查过，只有在这种情况下，todosToday 才会变得不可读。为了在发生变化的地方归零，我会在其他地方执行console.log()，它会打印出对象(在for循环之前、内部和之后)。起初我以为这是 attachEvent 兼容性，但那是针对早期版本的 IE，并且该函数也会被调用。非常感谢任何帮助。

Answer 1

当监听器触发时，循环变量 i 不在作用域内。修复它的简单方法是将其移至外部作用域:

var i;
for(i = 0; i <= todosToday.length - 1; i++) {

直接修改 DOM 时我通常更喜欢的方式是将对象引用添加到元素。

var todosToday = [ 'Wake up.', 'Kiss my wife.', 'Take a shower.' ];

for(var i = 0; i <= todosToday.length - 1; i++) {
  var a = document.createElement("a");
  a.innerText = todosToday[i];
  a.todo      = todosToday[i];

  a.addEventListener("click", function() {
    showFoundTodo(this.todo);
  });
  
  var div = document.createElement('div')
  div.appendChild(a);
  document.body.appendChild(div);
}

function showFoundTodo(todo) {
   console.log(todo);
}

注意:顺便说一句，您在所有 IE 版本中都会遇到问题。 IE 9 之前不支持 addEventListener，IE 11 之前不支持 let 和 const。