在 forEach -> eventlistener 函数中传递参数

问题描述

我该如何解决这个问题？

代码：

answerArr.forEach((div,index) => {
    div.addEventListener('click',() => {
      checkAnswer(div,index);
    });
  });

这有效，但我的函数运行了四次。 （因为我有四个 div - 在我的数组中，在 DOM 中）

我怎样才能达到这个结果：（只运行一个函数，但每个 div 仍然有 EventListener）

answerArr.forEach((div,checkAnswer(div,index));
  });

我知道我无法将参数传递给 EventListener。

谢谢！

解决方法

您可以使用 bind() 来确保使用指定的参数调用该函数。

例如：

answerArr.forEach((div,index) => {
    div.addEventListener('click',checkAnswer.bind(null,div,index));
});

bind() 的第一个参数，在本例中为 null，是您将函数的 this 值绑定到的参数。因此，如果您从 this 内部引用 checkAnswer，它将引用第一个参数。

此示例假设您有 4 个不同的 div，每个 div 都需要一个事件侦听器。如果您只有一个 div，则可能只是颠倒结构：

div.addEventListener('click',(event) => {
    // here you can use the "event" arg to get info about what was clicked
    checkAnswer();
});