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

Answer 1

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

设置onxxxxx 将事件处理程序设置为该一个函数.

来自Mozilla开发人员中心:

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

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

并查看同一文档的这一章,以便对旧onxxxx方法进行比较.