DOM事件回调中this默认指向触发事件的DOM元素，因浏览器内部显式将回调函数的this设为event.currentTarget；内联写法和addEventListener均遵循此规则，但事件委托时this指向绑定监听器的元素而非实际触发子元素。
DOM 事件回调中，this 默认指向触发该事件的 DOM 元素。
为什么 this 指向触发元素？
浏览器在调用事件处理函数时，是把它当作普通函数执行的（不是作为对象方法），此时 JavaScript 引擎按“默认绑定”规则处理：
非严格模式下，this 指向全局对象（如 window）；但 DOM 事件是个特例——浏览器内部做了特殊处理，把回调函数的 this 显式设为当前事件目标元素（即 event.currentTarget）。
- 比如给按钮添加点击监听：
btn.addEventListener('click', handler)，回调执行时this === btn - 内联写法
<button onclick="console.log(this)">中，this同样指向该<button>元素 - 事件委托时（如监听父容器），
this指向的是绑定监听器的那个元素，不是实际触发事件的子元素
常见陷阱：this 不是你想的实例或对象
当事件回调是类的方法或对象方法时，直接传入会丢失原始上下文：
-
element.addEventListener('click', obj.handleClick)→this不再是obj，而是element - 因为函数被“摘出来”单独调用，脱离了原对象的调用链
- 此时若在方法里访问
this.name，很可能报错或得到意外值（比如undefined）
如何让 this 指向预期的对象？
有三种主流做法，本质都是避免函数被“孤立调用”：
立即学习“Java免费学习笔记（深入）”；
-
箭头函数：利用其不绑定
this的特性，继承外层作用域的this（如类实例）element.addEventListener('click', () => this.handleClick()) -
bind 绑定：显式固定
this值element.addEventListener('click', this.handleClick.bind(this)) -
类字段箭头函数（推荐）：在类中定义箭头函数属性，天然捕获实例
thishandleClick = () => { console.log(this.message); }
补充：用 event.target 和 event.currentTarget 区分元素
即使 this 固定为监听器绑定的目标，你仍可通过事件对象获取更精确的元素信息：
-
event.target：实际触发事件的最深子元素（可能嵌套） -
event.currentTarget：等价于this，即监听器所在的元素 - 例如父容器监听点击，子按钮被点中：
this === 父容器，event.target === 子按钮
