JavaScript 事件侦听器与事件处理程序答案

【问题标题】：JavaScript Event Listeners vs Event HandlersJavaScript 事件侦听器与事件处理程序
【发布时间】：2010-02-07 00:34:54
【问题描述】：

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

    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 函数中吗？

【问题讨论】：

标签： javascript html event-listener eventhandler dom-events

【解决方案1】：

addEventListener添加一个事件处理函数到事件中。这种方式可以有无限数量的事件处理程序。

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

来自Mozilla Developer central：

addEventListener 在单个目标上注册单个事件侦听器。事件目标可以是文档中的单个节点、文档本身、窗口或 XMLHttpRequest。

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

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

【讨论】：

我没有在问题中解决这个问题，但是当我在输入字段（像素）上使用处理程序时，它确实运行了 onxxxxx 函数。你知道它为什么不附加吗？
我刚刚发现它为什么不起作用。我正在使用 updateNode() 完成阅读 moz 站点 "// 使用函数引用——注意缺少 '()' el.onclick = modifyText;"

【解决方案2】：

由于 ECMA 脚本的核心非常灵活 - 允许将函数、方法...几乎所有内容...分配给一个变量，因此拥有附加功能以将函数附加到变量，例如“addEventListener”就是我的全部意味着糟糕的设计。

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

pixels.onkeydown = updateNode;

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

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

是过度的 DOM 补充，不必要地让许多开发人员感到困惑，让他们认为如果您以第一种方式设置它会发生什么，而稍后其他一些脚本可能会使用另一种方式设置它:)

【讨论】：