JavaScript Event Listeners vs Event Handlers

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.

Answer 2

Since ECMA script is so flexible in its core - allowing to assign functions, methods... virtually everything... to a variable, having an additional functionality to attach a function to a variable such as "addEventListener" is my all means bad design.

So if you ask me, I'll tell you all that Pekka told, which I agree completely, and also that:

pixels.onkeydown = updateNode;

is ECMA script language natural statement, and:

pixels.addEventListener("keydown", updateNode, true);

is overdone DOM supplement that unnecessary confuses many developers making them think what will happen if you set it once the first way, and some other script later potentially may set it using the other way :)