在 dom 事件中，`this` 指向触发该事件的 html 元素本身。要实现这一点，只需将函数作为事件监听器直接绑定到元素上，或者使用内联 `onclick` 属性调用函数即可。

如何确保 this 指向当前点击的元素

通过 `addEventListener` 绑定的普通函数中，`this` 会自动指向注册监听器的 DOM 节点。这是最标准的做法，无需额外配置。

<button id="myBtn">Click me</button>

<script>
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
  console.log(this === btn); // true
  console.log(this.tagName); // BUTTON
});
</script>

箭头函数对 this 的影响是什么

如果使用箭头函数作为事件处理程序，`this` 将不再指向 DOM 元素，而是继承自定义该函数时的外层作用域（通常是全局对象或 undefined）。此时必须改用普通函数或显式使用 `event.currentTarget`。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

<button id="myBtn">Click me</button>

<script>
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
  console.log(this === window); // true (在浏览器全局环境中)
  console.log(this === btn);    // false
});
</script>

event.currentTarget 与 this 的关系

无论使用普通函数还是箭头函数，`event.currentTarget` 始终指向绑定监听器的 DOM 元素。在箭头函数中，它是获取当前元素的唯一可靠方式。

<button id="myBtn">Click me</button>

<script>
const btn = document.getElementById('myBtn');
btn.addEventListener('click', (event) => {
  console.log(event.currentTarget === btn); // true
  console.log(event.target === btn);        // true (若直接点击按钮)
});
</script>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南