代码之家 › 专栏 › 技术社区 › Kevin

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

dom-events eventhandler event-listener html javascript

Kevin · 技术社区 · 15 年前

好吧,我已经想了很久了,终于有时间调查了。如标题所示,“有什么区别?”我知道这是我想要的。

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

2 回复 | 直到 7 年前

Pekka 15 年前

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

设置 onxxxxx 集合事件处理程序 那一个功能 .

从 Mozilla Developer central 以下内容:

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

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

看到 this chapter of the same document 为了对比旧的 onxxxx 方式。

-3

PatlaDJ 15 年前

由于ECMA脚本的核心非常灵活,因此允许分配函数、方法…几乎所有的…对于一个变量,有一个附加的功能来将一个函数附加到一个变量上,比如“addEventListener”,这就是我所有的坏设计。

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

pixels.onkeydown = updateNode;

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

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

是过度的dom补充,不必要的混淆了许多开发人员,使他们认为如果您第一种方法设置它会发生什么,而其他一些脚本稍后可能会使用另一种方法设置它:)

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前