JavaScript事件监听器回调函数中获取目标元素的技巧
在JavaScript中，使用addEventListener()注册事件监听器时，回调函数需要访问事件对象和触发事件的元素（目标元素）。本文将介绍几种在回调函数中获取目标元素的方法。
方法一：使用箭头函数
箭头函数的this绑定到其周围的词法作用域，因此可以直接在箭头函数中使用this来访问目标元素：
立即学习“Java免费学习笔记（深入）”；
document.querySelector('#element').addEventListener('click', (e) => {
// this 指向目标元素
console.log(this);
});
方法二：使用bind()方法
对于传统的函数，this的指向取决于函数的调用方式。为了确保this指向目标元素，可以使用bind()方法绑定this：
function myFunction(e) {
// this 指向绑定时的上下文
console.log(this);
}
document.querySelector('#element').addEventListener('click', myFunction.bind(document.querySelector('#element')));
方法三：使用事件对象的target属性
事件对象e的target属性始终指向触发事件的元素，这是最可靠的方法：
document.querySelector('#element').addEventListener('click', function(e) {
// e.target 指向目标元素
console.log(e.target);
});
示例代码：
以下示例演示了如何使用e.target和this（在箭头函数中）获取目标元素：
// 点击事件函数
const eventClickFunc = (e) => {
handleDivClick(e, this);
}
const container = document.querySelector('.container');
container.addEventListener('click', eventClickFunc);
// 监听 click
function handleDivClick(e, element) {
console.log('e.target:', e.target); // 输出事件目标
console.log('element:', element); // 输出元素本身 (在箭头函数中使用this)
}
// 取消监听 click
function onRemoveEventListener() {
container.removeEventListener('click', eventClickFunc);
}
选择哪种方法取决于你的代码风格和具体需求。 e.target是最可靠和推荐的方法，因为它总是指向触发事件的元素，而不会受到this指向变化的影响。 箭头函数提供了一种简洁的方式，但需要注意其this的词法绑定特性。 bind()方法则适用于需要在函数中显式控制this指向的情况。
