如何将可移动事件侦听器添加到元素列表，但仍将参数传递给它调用的函数？

Question

我有一个存储在名为elementList的变量中的元素列表，并希望向每个元素添加一个事件侦听器。因此，我创建了以下循环：

for (i = 0; i < elementList.length; i++) {
  elementList[i].addEventListener('click', myFunction, false);
}

---

问题？我需要将i作为参数传递给myFunction。在网上进行了一些研究之后，我找到了这个解决方案：

for (i = 0; i < elementList.length; i++) {
  elementList[i].addEventListener('click', (function(i){
    return function(){
      myFunction(i);
    };
  }(i)), false);
}

---

该代码运行良好–但是仍然存在问题。稍后，在我的代码中，我需要再次删除事件侦听器，这是通过removeEventListener()方法完成的，正如我在进行更多研究后发现的那样。

但是此方法需要一个命名的外部函数-不适用于匿名函数。因此，它适用于上面的第一个示例，但不适用于第二个示例。

---

所以我的问题是：如何将事件侦听器添加到元素列表中，这使我能够完成这两项操作：

1. 将参数传递给我的函数
2. 稍后在代码中再次删除事件侦听器

我将感谢不使用jQuery的解决方案。谢谢！

---

注意：如果存在一个可以解决我问题的问题，请提供指向该问题的链接。但是，我找不到能够帮助我的人。

此外，如果需要更多信息，只需添加评论！

Answer 1

您可以生成函数列表，并使用它们删除监听器：

let removers = elementList.map((el, idx) => {
  let handler = () => myFunction(idx);
  el.addEventListener('click', handler);
  return () => el.removeEventListener('click', handler);
});

// when you need
//
removers[4]();  // calls removeEventListener