时间戳

首页 > 解决方案 > 加载 DOM 时触发 JS 事件

javascript - 加载 DOM 时触发 JS 事件

问题描述

我正在设计一个有趣的测验应用程序。测验将显示一个问题，有四个选项可供回答。我正在使用 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);
  }

标签： javascript

解决方案

你需要这样做：

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
}

推荐阅读