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

Ok, I have been trying to figure this out for a long time now and finally have the time to investigate. As the title suggests "What is the difference"? I know that this works the way I want it to.

好吧,我一直试图解决这个问题很长一段时间,最后有时间去调查。正如标题所暗示的“有什么区别”?我知道这可以按我想要的方式工作。

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.addEventListener("keyup", updateNode, true);
    pixels.addEventListener("keydown", updateNode, true);
}

But this doesn't, and only runs once.

但这不会,只运行一次。

    addLoadEvent(converter);

// Converter
function converter() {
    var pixels = document.getElementById("pixels");
    pixels.onkeydown = updateNode;
    pixels.onkeyup = updateNode;
}

What I'm I lacking... What is the difference? Any links to the topic would be helpful.

我缺少的是什么......有什么区别?任何指向该主题的链接都会有所帮助。

My assumption was that the handler should act like the listener but it doesn't. In fact does a listener even need to be added to the addLoadEvent function?

我的假设是处理程序应该像监听器一样,但事实并非如此。实际上是否需要将监听器添加到addLoadEvent函数中?

2 个解决方案

#1

addEventListener adds an event handler function to the event. There can be an unlimited number of event handlers this way.

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

Setting onxxxxx sets the event handler to that one function.

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

From the Mozilla Developer central:

来自Mozilla开发人员中心:

addEventListener registers a single event listener on a single target. The event target may be a single node in a document, the document itself, a window, or an XMLHttpRequest.

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

To register more than one event listeners for the target, call addEventListener for the same target but with different event types or capture parameters.

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

And see this chapter of the same document for a comparison of the old onxxxx way.

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

#2

-3

Since ECMA script is so flexible in its core - allowing to assign functions, methods... virtually everything... to a variable, having an additional functionality to attach a function to a variable such as "addEventListener" is my all means bad design.

由于ECMA脚本的核心是如此灵活 - 允许将函数,方法......几乎所有......分配给变量,具有将函数附加到变量(例如“addEventListener”)的附加功能,这一切都意味着糟糕的设计。

So if you ask me, I'll tell you all that Pekka told, which I agree completely, and also that:

所以,如果你问我,我会告诉你Pekka所说的一切,我完全同意,并且:

pixels.onkeydown = updateNode;

is ECMA script language natural statement, and:

是ECMA脚本语言的自然语句,并且:

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

is overdone DOM supplement that unnecessary confuses many developers making them think what will happen if you set it once the first way, and some other script later potentially may set it using the other way :)

是过度的DOM补充,不必要的混淆许多开发人员让他们想一想如果你第一次设置它会发生什么,而其他一些脚本以后可能会使用另一种方式设置它:)

#1