加载 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);

}