参数未在IE11上的addEventListener上传递

Posted 2021-04-13

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

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

}

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

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

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

我检查过，只有在那个例子中todosToday变得不可读。要在变化所在的位置归零，我会在其他地方执行console.log()并打印出对象（在for循环之前，之内和之后）。起初我认为这是attachEvent的兼容性，但是对于IE的早期版本，该功能也被调用。任何帮助是极大的赞赏。

答案

在侦听器触发时，循环变量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);
}

以上是关于参数未在IE11上的addEventListener上传递的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript之元素绑定事件

IE 11、XMLHttpRequest、xhr.upload 未在 Webworker 中设置

<select> 上的 jQuery 更改事件未在 IE 中触发

HTML5 音频文件未在 IE11 中显示

hashchange 事件未在 IE10 和 IE11 中触发，具有 history.pushState 和 url 手动操作的组合

未在IE11上加载错误“符号”的Vue.js未定义