事件监听器中this默认指向触发事件的dom元素，前提是使用普通函数且未被箭头函数或bind等修改；箭头函数继承外层this，事件委托中this指向绑定元素而非实际目标，此时应优先用event.target。
在事件监听器的回调函数中，this 默认就指向触发事件的 DOM 元素——但前提是使用传统函数声明（function），且未被箭头函数、bind、call 或 apply 显式修改。
为什么 this 通常指向目标元素？
浏览器在调用事件监听器时，会自动将当前触发事件的元素作为 this 值传入普通函数。这是 DOM 规范定义的行为，无需额外设置。
确保 this 正确指向的常用方式
-
用普通函数（非箭头函数）作为回调：
箭头函数不绑定自己的
this，它继承外层作用域的this（通常是window或undefined），所以不能用于依赖this指向 DOM 的场景。 -
避免意外绑定：
不要用
func.bind(someOtherObj)或obj.method.bind(obj)包裹监听器，除非你明确想覆盖默认行为；否则this会被固定为绑定对象，不再指向触发元素。 -
注意事件委托中的 this：
在父元素上监听事件（如
ul.addEventListener('click', handler)），当点击子元素（如li）时，this仍指向ul（即绑定监听器的元素），不是li。此时应使用event.target获取真正被点击的元素。
对比示例
✅ 正确（this 指向按钮）：
button.addEventListener('click', function() {
console.log(this); // <button>元素
});</button>
❌ 错误（this 不是按钮）：
button.addEventListener('click', () => {
console.log(this); // window 或 undefined（严格模式）
});
button.addEventListener('click', handler.bind({})); // this 永远是 {}
更稳妥的替代方案：优先用 event.target
如果逻辑复杂、涉及箭头函数或需要确保获取“实际触发事件的元素”，直接使用 event.target 更可靠。它始终指向事件真正发生的节点（与 this 可能不同，尤其在事件委托中）。
例如：
ul.addEventListener('click', (e) => {
console.log(e.target); // 点击的 li 元素
console.log(this); // ul 元素（因为 this 是绑定时的上下文）
});Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
