基本 JS 问题，箭头 Function，使用 addEventListener 中的参数进行回调

Question

我这里有一个基本的 function。 我希望能够将参数传递给它。 但是，它被addEventListener调用。 现在，在阅读此处并进行研究后，我让它开始工作，所以如果我将 TOP 选项放入 - 它就可以工作。 当我使用底部选项时，就在它下面 - 它不起作用。 （如果我想使用参数则不行）。 我只是想知道一个基本的解释，为什么带回调的箭头 function 可以带参数，这是怎么回事？ 不确定我是否很好地解释了我的问题。

for (i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', (e) => imgChoose(e, i));
}

for (i = 0; i < dots.length; i++) {
  dots[i].addEventListener('click', imgChoose);
}

var i = 0;

function imgChoose(e, i) {
  var test = dots[i].className;
  console.log(e);
}

Answer 1

它与箭头函数无关，你也可以使用普通函数。 重要的是当addEventListener 调用你的function 时，它只会传入一个参数：事件。 如果你想用两个参数调用 function，你可以，但你必须自己编写代码。

这是常规 function 的外观：

dots[i].addEventListener('click', function (e) { imgChoose(e, i) });

---

PS：如所写，您有一个变量i用于所有点击回调。 所以他们都将使用i的最终值，它等于dots.length 。 您应该在循环的初始化中创建i ，并确保使用let而不是var 。

for (let i = 0; i < dots.length; i++) {