最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - .addEventListener vs .onclick - Stack Overflow

programmeradmin2浏览0评论

I keep reading that there is no difference between the two but I am writing a quiz app and am seeing some differences

For example:

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();
    };
};

When using an event listener, I will log the guess to the console on the first button choice. When I choose an answer for the second question the console will read not only the new selection but also the choice I made from the previous question. This does not happen when using .onclick() and I am not sure why!

I keep reading that there is no difference between the two but I am writing a quiz app and am seeing some differences

For example:

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();
    };
};

When using an event listener, I will log the guess to the console on the first button choice. When I choose an answer for the second question the console will read not only the new selection but also the choice I made from the previous question. This does not happen when using .onclick() and I am not sure why!

Share Improve this question edited Oct 22, 2019 at 5:56 Marius Mucenicu 1,7932 gold badges17 silver badges26 bronze badges asked Jun 20, 2017 at 19:40 Collin DeSotoCollin DeSoto 1411 silver badge11 bronze badges 2
  • 2 addEventListener allows you to bind more than one event handler to the same event, whereas .onclick will overwrite any existing one. So your code is doing something wrong. – Niet the Dark Absol Commented Jun 20, 2017 at 19:42
  • That must be it then. When I run multiple events on the button when using .assEventListener it must be keeping all instances of "guess" that are passed through. – Collin DeSoto Commented Jun 20, 2017 at 19:47
Add a ment  | 

1 Answer 1

Reset to default 7

Consider the following code:

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>

In case 1, clicking on el1 will alert with both messages. In case 2, clicking on el2 will only alert with the second because we overwrote what onclick does with the second assignment.

addEventListener effectively assigns a callback to some internal array of listener callbacks that will all be called whenever the event is triggered.

onclick is a single property with a single value. When you assign to it, the old value is replaced by the new assignment.


I would highly suggest that you do not use the onclick method. It makes code harder to maintain. If you are in a large code base and you set the onclick of an element and then later on another coder also sets the onclick without knowing that that element already had its onclick set, then you will run into a difficult time trying to figure out why your code is broken all of a sudden. Using the event listener pattern makes for more extensible and decoupled code.

发布评论

评论列表(0)

  1. 暂无评论