在事件处理程序中使用它

IT技术 javascript dom javascript-events
2021-02-28 01:55:08

我试图this在 DOM 级别 3 事件规范中找到事件处理函数中关键字的含义

根据我的实验this是指event.currentTarget对象。

标准中是否提到了这种行为?

根据“JavaScript The Definitive Guide”一书this提到的event target似乎是错误的。event.currentTarget似乎更合乎逻辑,因为事件处理程序作为 HTML 元素对象的方法被调用。

有人可以澄清一下吗?

在冒泡的情况下,我看到“this”发生变化,表示 event.currentTarget。

2个回答

事实上,在这种情况下,权威指南是错误的。

我在HTML5 事件处理程序处理算法中找到了一个参考

callback使用一个参数调用,其值是 Event object E,回调this 值设置为E's currentTarget

DOM 级别 3 事件规范在以前的版本中并没有对此进行过多说明 - 它旨在与语言无关。附录F:ECMAScript语言绑定刚才所说的

EventListener 函数:该函数没有返回值。参数应该是一个实现Event接口的对象

但是,当前版本省略了这些绑定。并在其词汇表附录中描述了事件侦听器:

事件处理程序事件侦听器:实现EventListener接口并提供EventListener.handleEvent()回调方法的对象。事件处理程序是特定于语言的。事件处理程序被调用中的上下文中的特定对象(当前事件的目标),并且设置有所述event对象本身。

此外,即将发布的 DOM Level 4 草案,其目标包括使 DOM 与 EcmaScript 的需求保持一致,Dispatching Events部分明确指出

如果listener回调是一个 Function 对象,它的回调这个值就是eventcurrentTarget属性值。

@RobG:感谢您的评论。我现在还在 DOM 级别 3 和 4 规范中找到了参考:-)
2021-04-22 01:55:08
@Bergi-坚持不懈的荣誉。我不喜欢 DOM 标准变得更加以 ECMAScript 为中心,语言不可知论是他们的优点之一。侦听器在元素的“上下文中”被调用的声明推断该元素及其属性位于侦听器(函数的)作用域链上(参见执行上下文)。传递事件目标,因为应该是一种语言功能,已经有一个事件对象传递给具有对事件目标的引用的函数,因此不需要设置(尽管它很方便)。没有这个的语言呢?
2021-04-27 01:55:08
@RobG 您的观点绝对有效。我对书的描述感到困惑,所以在这里问了这个问题。
2021-05-05 01:55:08
请注意 HTML 5规范不是标准,DOM 规范是。:-)。DOM 规范是语言中立的(就像 4.01 之前的 HTML 规范一样),因此不包括像this关键字这样的语言特性
2021-05-11 01:55:08
@PK——也应该提到在很多地方,HTML5 只是记录行为(并在这个过程中选择最喜欢的),所以虽然 Bergi 引用了 HTML5 规范。在大多数浏览器中的大多数情况下可能是正确的,但对于某些情况则不正确(例如使用 IE 的attachEvent添加的侦听器)。
2021-05-11 01:55:08

在元素的事件处理程序中,默认捕获 (false)this将引用检测到事件的元素。任何一种都可以使用。

例如:

element.addEventListener('keydown', function (event) {
    // `this` will point to `element`
}, false);

当捕获事件 (true) 时,例如在窗口级别,event.target, 将指代发起事件的元素,而this将指代捕获元素。例如:

window.addEventListener("error", function (event) {
    event.target.src = 'some_path';
    // `this` will point to window
    // `event.target` will point to the element that had an error
}, true);

我希望这能说明每个人之间的区别。