Question

Ok, I have been trying to figure this out for a long time now and finally have the time to investigate. As the title suggests “What is the difference”? I know that this works the way I want it to.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

But this doesn’t, and only runs once.

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

What I’m I lacking… What is the difference? Any links to the topic would be helpful.

My assumption was that the handler should act like the listener but it doesn’t. In fact does a listener even need to be added to the addLoadEvent function?

Answer 1

addEventListener adds an event handler function to the event. There can be an unlimited number of event handlers this way.

Setting onxxxxx sets the event handler to that one function.

From the Mozilla Developer central:

addEventListener registers a single event listener on a single target. The event target may be a single node in a document, the document itself, a window, or an XMLHttpRequest.

To register more than one event listeners for the target, call addEventListener for the same target but with different event types or capture parameters.

And see this chapter of the same document for a comparison of the old onxxxx way.