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

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开发中央 ：

  

的addEventListener寄存器对一个目标的单个事件侦听器。事件目标可以是文档中的单个节点，该文档本身，一个窗口，或一个XMLHttpRequest。

     

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

和看到的本章同一文档的 为旧onxxxx方式的比较。

Answer 2

由于ECMA脚本是在其核心，以便灵活 - 允许分配功能，方法...几乎所有...到一个变量中，具有附加功能的功能附加到一个变量，如“的addEventListener”是我的所有意味着不好的设计。

所以，如果你问我，我会告诉你所有的佩卡说，我完全同意，而且也是：

pixels.onkeydown = updateNode;

是ECMA脚本语言自然语句和：

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

过头DOM的补充，不必要的混淆许多开发商让他们觉得如果你把它一旦第一种方式会发生什么，以及其他一些脚本后可能会使用其他方式进行设置：）