加载 DOM 时触发 JS 事件

Question

我正在设计一个有趣的测验应用程序。 测验将显示一个问题，有四个选项可供回答。 我正在使用 vanilla JS 来更新 DOM，并且需要为呈现的每个答案添加一个 eventListener。 出于某种原因，一旦呈现 DOM， eventListener 就会触发。 关于为什么的任何想法？

  //add each answer to the answerContainer
  answerContainer.innerHTML = '';
  for (let i = 0; i < allAnswersFlattened.length; i++) {
    let individualAnswer = document.createElement('div');
    individualAnswer.className = 'answer';
    let answerText = document.createTextNode(allAnswersFlattened[i]);
    individualAnswer.appendChild(answerText);
    individualAnswer.addEventListener("click", checkForAnswer(i, allAnswersFlattened));
    answerContainer.appendChild(individualAnswer);
  }

Answer 1

你需要这样做：

individualAnswer.addEventListener("click", function() {
    checkForAnswer(i, allAnswersFlattened));
});

但是随后您会遇到i不正确的问题（因为在单击它时， i值已增加。

所以可能你应该这样做：

individualAnswer.addEventListener("click", ((i) => function() {
    checkForAnswer(i, allAnswersFlattened));
})(i));

或者

individualAnswer.addEventListener("click", checkForAnswer.bind(this, i, allAnswersFlattened));

或者让checkForAnswer返回一个函数：

function checkForAnswer(i, allAnswers) => () => {
    // whatever the code was before
}

Answer 2

您的事件正在触发，因为您在此处调用该函数：

individualAnswer.addEventListener("click", checkForAnswer(i, allAnswersFlattened));

checkForAnswer(i, allAnswersFlattened) - 执行函数，而不是将其作为参数传递给 addEventListener

您需要做的是创建一个事件处理程序，您可以从中调用“checkForAnswer”（请参阅​​下面的 myEventListener）：

answerContainer.innerHTML = '';
for (let i = 0; i < allAnswersFlattened.length; i++) {
  var myEventListener = function(e) {
    checkForAnswer(i, allAnswersFlattened)
  };
  let individualAnswer = document.createElement('div');
  individualAnswer.className = 'answer';
  let answerText = document.createTextNode(allAnswersFlattened[i]);
  individualAnswer.appendChild(answerText);
  individualAnswer.addEventListener("click", myEventListener );
  answerContainer.appendChild(individualAnswer);
}