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

- Kevin

Answer 1

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

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

来自Mozilla 开发者中心：

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

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

另请参阅相同文档的此章节，以比较旧的onxxxx方法。

- Pekka

---

我在问题中没有提到这一点，但当我在输入字段“pixels”上使用处理程序时，它确实运行了函数“onxxxxx”。你知道为什么它不能附加？ - Kevin

我刚刚发现为什么它没有工作。我正在使用updateNode()，并阅读了moz网站上的内容："// 使用函数引用-注意缺少'（）' el.onclick = modifyText;" - Kevin

Answer 2

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

因此，如果你问我，我会告诉你Pekka所说的一切，我完全同意，并且还要补充：

pixels.onkeydown = updateNode;

ECMA Script语言是一种自然语句吗？

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

DOM的过度补充已经让很多开发人员感到困惑，让他们认为如果你首先使用一种方式进行设置，那么后来可能会有其他脚本使用另一种方式进行设置，这是没有必要的 :)

- PatlaDJ