14

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

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

标准中的某处是否提到了这种行为？

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

有人可以澄清一下吗？

在冒泡的情况下，我看到“this”发生了变化，意味着 event.currentTarget。

4

2 回答 2

18

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

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

使用一个参数调用callback，其值为 Event 对象E，回调this 值设置为E's currentTarget。

DOM 3 级事件规范在以前的版本中并没有说太多——它的目的是与语言无关。刚刚提到的附录 F：ECMAScript 语言绑定

EventListener 函数：该函数没有返回值。参数应为实现Event接口的对象。

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

事件处理器、事件监听器：实现EventListener接口并提供EventListener.handleEvent()回调方法的对象。事件处理程序是特定于语言的。事件处理程序在特定对象（当前事件目标）的上下文中调用，并随对象本身一起提供。event

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

如果listener's 的回调是一个 Function 对象，它的回调 this 值就是event' 的currentTarget属性值。

于 2013-07-15T23:31:18.020 回答
11

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

例如：

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

当捕获一个事件（真）时，比如说在窗口级别，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);

我希望这能说明两者之间的区别。

于 2013-07-15T23:23:21.913 回答