加载 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() {&nbsp; &nbsp; checkForAnswer(i, allAnswersFlattened));});但随后您会遇到不正确的问题i（因为单击它时，该i值已增加。所以也许你应该这样做：individualAnswer.addEventListener("click", ((i) => function() {&nbsp; &nbsp; checkForAnswer(i, allAnswersFlattened));})(i));或者individualAnswer.addEventListener("click", checkForAnswer.bind(this, i, allAnswersFlattened));或者有checkForAnswer返回一个函数：function checkForAnswer(i, allAnswers) => () => {&nbsp; &nbsp; // 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++) {&nbsp; var myEventListener = function(e) {&nbsp; &nbsp; checkForAnswer(i, allAnswersFlattened)&nbsp; };&nbsp; let individualAnswer = document.createElement('div');&nbsp; individualAnswer.className = 'answer';&nbsp; let answerText = document.createTextNode(allAnswersFlattened[i]);&nbsp; individualAnswer.appendChild(answerText);&nbsp; individualAnswer.addEventListener("click", myEventListener );&nbsp; answerContainer.appendChild(individualAnswer);}