在事件处理程序中使用它

Question

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

根据我的实验， this引用了event.currentTarget对象。

这种行为是否在标准的某处提到过？

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

有人可以澄清一下吗？

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

Answer 1

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

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

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

DOM 3级事件规范在以前的版本中没有说太多 - 它本来是语言无关的。 附录F： ECMAScript语言绑定刚才说明

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

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

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

此外，即将发布的DOM Level 4草案，其目标包括将DOM与EcmaScript的需求对齐，确实在Dispatching Events部分中明确说明：

如果listener的回调是一个Function对象，则其回调此值是event的currentTarget属性值。

Answer 2

在元素的事件处理程序中，使用默认捕获（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);

我希望这能够说明每种方法之间的区别。