13

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

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

4

2 回答 2

10

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

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

从Mozilla 开发者中心：

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

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

并查看同一文档的这一章以比较旧onxxxx方式。

于 2010-02-07T00:37:31.763 回答
-4

由于 ECMA 脚本的核心非常灵活 - 允许将函数、方法......几乎所有东西......分配给一个变量，因此具有将函数附加到变量（例如“addEventListener”）的附加功能是我所有的坏设计.

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

pixels.onkeydown = updateNode;

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

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

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

于 2010-02-07T01:15:10.473 回答