JavaScript 事件监听器与事件处理程序

Question

好的，我已经尝试解决这个问题很长时间了，终于有时间调查了。正如标题所暗示的“有什么区别”？我知道这会按照我想要的方式工作。

    addLoadEvent(converter);

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

但这不会，而且只会运行一次。

    addLoadEvent(converter);

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

我缺少什么……有什么区别？任何指向该主题的链接都会有所帮助。

我的假设是处理程序应该像监听器一样工作，但事实并非如此。事实上，甚至需要将监听器添加到 addLoadEvent 函数吗？

Answer 1

addEventListener 向事件添加事件处理函数。这样可以有无限数量的事件处理程序。

设置 onxxxxx 设置事件处理程序为那个函数。

来自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.

并查看 this chapter of the same document用于比较旧的 onxxxx 方式。