加載 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);
}