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在单个目标上注册单个事件侦听器。事件目标可以是文档中的单个节点，文档本身，窗口或XMLHttpRequest。

要为目标注册多个事件侦听器，请为同一目标调用addEventListener，但使用不同的事件类型或捕获参数。

请参阅this chapter of the same document以了解旧onxxxx方式的比较。

Answer 2

由于ECMA脚本的核心是如此灵活 - 允许将函数，方法......几乎所有...分配给变量，具有将函数附加到变量（例如“addEventListener”）的附加功能是我的全部意味着糟糕的设计。

所以，如果你问我，我会告诉你Pekka所说的一切，我完全同意，还有：

pixels.onkeydown = updateNode;

是ECMA脚本语言的自然语句，并且：

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

是过度的DOM补充，不必要让许多开发人员感到困惑，让他们想一想如果你在第一种方式设置它会发生什么，而其他一些脚本以后可能会用另一种方式设置它：）

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

2 个答案: