Question

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

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

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

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

有人可以澄清一下吗？

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

Answer 1

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

我在HTML5 event handler processing algorithm中找到了一个引用：

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

DOM级别3事件规范在以前的版本中没有说太多 - 它本来是语言无关的。 Appendix F: ECMAScript Language Binding刚刚陈述了

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

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

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

此外，即将推出的DOM Level 4草案，其goals包含将DOM与EcmaScript的需求对齐，确实明确说明了in the Dispatching Events section：

如果event的回调是一个Function对象，则其callback this value是listener的{{3}}属性值。

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

我希望这能说明每种情况之间的区别。

在事件处理程序中使用它

2 个答案: