Question

我一直在读这两者之间没有区别，但是我正在写一个测验应用程序并且看到了一些差异

例如：

    Quiz.prototype.handleGuess = function (id, guess) {
        let button = document.getElementById(id);

        button.addEventListener('click', function(){
            quiz.guess(guess);
            console.log(guess);

        }

        if(!quiz.hasEnded){
            quiz.displayNext();
        } else {
            quiz.displayScore();
        };
    };

使用事件监听器时，我会在第一个按钮选项上将猜测记录到控制台。当我为第二个问题选择答案时，控制台不仅会读取新选项，还会读取我之前提出的问题所做的选择。使用.onclick（）时不会发生这种情况，我不知道为什么！

Answer 1

请考虑以下代码：

var el1 = document.getElementById("someEl1"),
  el2 = document.getElementById("someEl2");

function firstHandler() {
  alert("First handler");
}

function secondHandler() {
  alert("Second handler");
}

el1.addEventListener("click", firstHandler);
el1.addEventListener("click", secondHandler);

el2.onclick = firstHandler;
el2.onclick = secondHandler;

<div id="someEl1">First Element</div>
<div id="someEl2">Second Element</div>

在案例1中，点击el1会提醒两条消息。在案例2中，点击el2只会警告第二个，因为我们覆盖了onclick对第二个作业所做的事情。

addEventListener有效地将回调分配给一些内部侦听器回调数组，只要触发事件就会调用 all 。

onclick是具有单个值的单个属性。分配给它时，旧值将被新分配替换。

我强烈建议您不要使用onclick方法。它使代码难以维护。如果您在一个大型代码库中并且设置了一个元素的onclick，那么稍后在另一个编码器上设置onclick而不知道该元素已经设置了onclick，那么你会遇到困难的时候试图找出你的代码突然被破坏的原因。使用事件侦听器模式可以实现更多可扩展和解耦的代码。

.addEventListener vs .onclick

1 个答案: