在事件处理程序中使用它

Question

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

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

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

根据"JavaScript The Definitive Guide"一书中this提到的event target那些似乎是错误的.event.currentTarget似乎更合乎逻辑,因为事件处理程序被调用为HTML元素对象的方法.

有人可以澄清一下吗？

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

Answer 1

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

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

callback使用一个参数调用,其值为Event对象E,并将此值设置为E's 的回调currentTarget.

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

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

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

事件处理程序,事件侦听器:实现EventListener接口并提供EventListener.handleEvent()回调方法的对象.事件处理程序是特定于语言的.事件处理程序被调用中的上下文中的特定对象(的当前事件的目标),并且设置有所述event对象本身.

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

如果listener的回调是一个功能对象,它的回调这个值是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);

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