在事件处理程序中使用它

Question

我试图在 DOM 级别 3 事件规范中的事件处理函数内找到

this

关键字的含义。

根据我的实验，

this

指的是

event.currentTarget

对象。

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

根据“JavaScript权威指南”一书，

this

指的是

event target

，这似乎是错误的。

event.currentTarget

似乎更符合逻辑，因为事件处理程序作为 HTML 元素对象的方法被调用。

有人可以澄清一下吗？

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

Answer 1

确实，在这种情况下《权威指南》是错误的。

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

使用一个参数调用

callback

，其值为 Event 对象

E

，回调函数 this value 设置为

E

的

currentTarget

。

DOM level 3 事件规范在以前的版本中没有对此进行太多说明 - 它意味着与语言无关。 附录 F：ECMAScript 语言绑定刚刚说过

事件监听器函数： 该函数没有返回值。该参数应是实现

Event

接口的对象。

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

事件处理程序、事件监听器：实现

EventListener

接口并提供

EventListener.handleEvent()

回调方法的对象。事件处理程序是特定于语言的。事件处理程序在特定对象（当前事件目标）的上下文中调用，并与event对象本身一起提供。

此外，即将到来的 DOM Level 4 草案，其

目标

包含使 DOM 与 EcmaScript 的需求保持一致，确实在调度事件部分中明确声明了： 如果

listener

的

callback

 是一个 Function 对象，那么它的 

callback this value 就是 event 的

currentTarget

属性值。

在元素的事件处理程序中，使用默认捕获 (false)，

Answer 2

将引用检测到事件的元素。可以使用其中任何一种。

例如：

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);

我希望这能体现两者之间的差异。

Answer 3

每当我使用

arrow function

作为HTML元素对象的addEventListener()

方法的回调函数时，

this keyword

指的是

Window{} object literal

。发生这种情况可能是因为浏览器的窗口正在捕获事件，而目标 HTML 元素刚刚触发了事件，根据我对 

这个答案

的理解。 但是，当我使用使用

function

关键字定义的函数作为 addEventListener()

 方法的回调函数而不是 

arrow function

 时，则 

this keyword

 指的是目标 HTML 元素，而不是 

Window{} object

。

查看以下示例，请随时提供反馈：

let btn = document.querySelector("button");

function check() { //Standalone function
    console.log(this); 
}

/*In above function, 'this' refers to 'window' object, but when the
'check()' function is passed as a callback to the 'addEventListener()'
method, then 'this' keyword refers to the 'btn' element object. */

btn.addEventListener("click", check); 
//Output, when 'click' event gets triggered: <button>Click Me!</button>

btn.addEventListener("click", function() {
    console.log(this); 
});
//Output, when 'click' event gets triggered: <button>Click Me!</button>


/* Whereas, if the callback function of the 'addEventListener()' method would
be an 'arrow function', instead of standalone function or a function defined
using 'function' keyword, then 'this' keyword would refer to 'window' object.*/

btn.addEventListener("click", () => {
    console.log(this);
});
//Output, when 'click' event gets triggered: Window {window: Window, self: Window, document: document, …}