JavaScript事件监听器回调函数的this指向问题

答案 #

这里的this指向触发点击事件的、绑定了该监听器的DOM元素，也就是你通过.myclass选择器匹配到的元素实例，你的测试结果是正确的。

你产生疑惑的原因是混淆了不同函数调用场景下的this绑定规则：

• 你在文档里看到的“非类成员的普通函数默认this指向全局对象（浏览器下为window）”，只适用于没有指定绑定、直接调用普通函数的场景。
• 而通过addEventListener绑定的事件回调属于浏览器定义的特殊调用场景，W3C标准明确约定：触发事件时，浏览器调用回调函数会主动把this绑定到当前触发事件的目标DOM元素上，因此不适用普通函数的默认绑定规则。

你可以通过以下简单代码验证该逻辑：

// 普通直接调用
function testThis() {
  console.log(this); 
}
testThis(); // 输出window

// 作为事件回调调用
document.querySelector('button').addEventListener('click', testThis);
// 点击按钮时输出<button>元素，和你遇到的场景一致

内容的提问来源于stack exchange，提问作者alancc