在事件处理程序中使用它

问题描述 投票:0回答:3

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

this
关键字的含义。

根据我的实验,

this
指的是
event.currentTarget
对象。

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

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

this
指的是
event target
,这似乎是错误的。
event.currentTarget
似乎更符合逻辑,因为事件处理程序作为 HTML 元素对象的方法被调用。

有人可以澄清一下吗?

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

javascript dom dom-events
3个回答
22
投票

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

我在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),

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

例如:

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

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


0
投票

每当我使用

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, …}

© www.soinside.com 2019 - 2024. All rights reserved.