我试图在 DOM 级别 3 事件规范中的事件处理函数内找到
this
关键字的含义。
根据我的实验,
this
指的是event.currentTarget
对象。
标准中是否提到了这种行为?
根据“JavaScript权威指南”一书,
this
指的是event target
,这似乎是错误的。 event.currentTarget
似乎更符合逻辑,因为事件处理程序作为 HTML 元素对象的方法被调用。
有人可以澄清一下吗?
在冒泡的情况下,我看到“this”发生变化,意味着 event.currentTarget.
确实,在这种情况下《权威指南》是错误的。
我在HTML5事件处理程序处理算法中找到了参考:
使用一个参数调用
,其值为 Event 对象callback
,回调函数 this value 设置为E
的E
。currentTarget
DOM level 3 事件规范在以前的版本中没有对此进行太多说明 - 它意味着与语言无关。 附录 F:ECMAScript 语言绑定刚刚说过
事件监听器函数: 该函数没有返回值。该参数应是实现
接口的对象。Event
但是,当前版本省略了这些绑定。在其词汇表附录事件监听器中进行了描述:
目标事件处理程序、事件监听器:实现
接口并提供EventListener
回调方法的对象。事件处理程序是特定于语言的。事件处理程序在特定对象(当前事件目标)的上下文中调用,并与EventListener.handleEvent()
event
对象本身一起提供。 此外,即将到来的 DOM Level 4 草案,其
包含使 DOM 与 EcmaScript 的需求保持一致,确实在调度事件部分中明确声明了: 如果
listener
的在元素的事件处理程序中,使用默认捕获 (false),callback
是一个 Function 对象,那么它的callback this value 就是event
的属性值。currentTarget
例如:
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);
我希望这能体现两者之间的差异。
每当我使用
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, …}