为什么事件监听器会执行以下代码？

如何解决为什么事件监听器会执行以下代码？

我在 udemy AJAX 课程中构建了此代码。我很感谢您了解为什么我的事件侦听器在被点击之前执行 console.log 代码，并且控制台将正确答案记录 4 次（命名为 a）作为 ansChecker 函数的一部分。

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Ajax</title>
  <style>
  </style>
</head>

<body>
  <h1>Trivia api</h1>
  <div>Score: <span id="score"></span></div>
  <div id="output"></div>
  <div id="selAnswers"></div>
  <input type="button" id="btn" value="Next Question">
  <script>
    var btn = document.getElementById('btn').addEventListener('click',getItem);

    var answers = {
      'correct': 0,'incorrect': 0
    };

    function getItem() {
      var url = "https://opentdb.com/api.php?amount=1";
      var output = document.getElementById('output');

      requestAjax(url,function(data) {
        var info = data.results[0];
        console.log(info);

        output.innerHTML = '<div>Category: ' + info.category + '</div>';
        output.innerHTML += '<div>Question: ' + info.question + '</div>';

        questionBuilder(info.correct_answer,info.incorrect_answers);
      });
    }

    function questionBuilder(corr,incorr) {
      /*console.clear();*/

      var holder = incorr;
      
      holder.push(corr);

      holder.sort();

      var selAnswers = document.getElementById('selAnswers');

      for (i in holder) {
        //                selAnswers.innerHTML ='';
        selAnswers.innerHTML += '<input type="button" id="answer" value="' + holder[i] + '">';

        document.getElementById('answer').addEventListener('click',ansChecker(corr));
      }
    }

    function ansChecker(a) {
      console.log(a);
    }

    function requestAjax(url,callback) {
      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          callback(JSON.parse(xhr.responseText));
        }
      }

      xhr.open('GET',url,true);

      xhr.send();
    }
  </script>
</body>
</html>

解决方法

以下行执行 ansChecker 函数，而不是将其作为回调传递给事件侦听器：

document.getElementById('answer').addEventListener('click',ansChecker(corr));

应该在回调函数中绑定或调用参数，如下所示：

// Within callback example
document.getElementById('answer').addEventListener('click',() => ansChecker(corr));

// Binded example
document.getElementById('answer').addEventListener('click',ansChecker.bind(this,corr);

总的来说，MDN 是阅读预期参数的好地方，并且有很好的示例可以帮助您：

添加事件监听器：
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

绑定：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

对于您的第二个问题，由于事件侦听器附加到的目标，它会控制 Counter-Strike 4 次：

document.getElementById('answer');

这将在它找到的第一个元素上附加事件侦听器，其 ID 为 answer，在这种情况下，它始终是 Counter Strike 输入。此外，id 对于整个页面 DOM 应该是唯一的，所以不要重复使用相同的。有不同的方法可以针对每个答案的各个元素进行定位。一种方法是执行以下操作：

holder.forEach(value => {
    let inputEl = document.createElement('input');
    inputEl.setAttribute('type','button');
    inputEl.setAttribute('value',value);
    selAnswers.appendChild(inputEl);
    inputEl.addEventListener('click',() => ansChecker(corr));
});

为什么事件监听器会执行以下代码？

如何解决为什么事件监听器会执行以下代码？

解决方法

相关推荐