在HTML中获取事件源主要通过事件对象的target属性实现，当事件触发时，浏览器会创建event对象，通过event.target即可访问最初触发事件的DOM元素，例如在点击事件中，event.target指向被点击的具体元素，无论事件是否冒泡。
标准方法：event.target 属性
当事件触发时，浏览器会创建event对象，其target属性指向实际触发事件的元素（最内层元素）。
<button id="myButton">点击</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("事件源：", event.target); // 输出：<button id="myButton">点击</button>
});
</script>
this 关键字（注意作用域）
在通过addEventListener绑定的事件处理函数中，this指向绑定事件的元素（非箭头函数时）：
<div id="parent">
<button>子按钮</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", function(event) {
console.log("绑定事件的元素：", this); // 输出：<div id="parent">...</div>
console.log("实际触发源：", event.target); // 输出：<button>子按钮</button>
});
</script>
注意：箭头函数中的
this指向外层作用域，需改用event.currentTarget。
event.currentTarget 属性
始终指向绑定事件处理程序的元素，与this行为一致（推荐替代this）：
element.addEventListener("click", (event) => {
console.log(event.currentTarget); // 箭头函数中安全获取绑定元素
});
兼容旧版IE的写法
旧版IE（≤IE8）使用srcElement代替target,兼容写法：
function handleClick(event) {
const source = event.target || event.srcElement;
console.log("事件源：", source);
}
事件委托中的事件源
事件委托时，通过event.target精准定位触发子元素：
<ul id="list">
<li>项目1</li>
<li>项目2</li>
</ul>
<script>
document.getElementById("list").addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
alert("点击了：" + event.target.textContent);
}
});
</script>
| 属性/关键字 | 指向目标 | 适用场景 |
|---|---|---|
event.target |
实际触发事件的元素（最内层） | 精准定位事件源 |
event.currentTarget |
绑定事件处理程序的元素 | 替代this，避免箭头函数问题 |
this |
绑定事件的元素（非箭头函数） | 传统函数作用域 |
event.srcElement |
target的IE兼容写法 |
兼容旧浏览器 |
最佳实践建议
- 首选
event.target：精确获取触发源，尤其在事件委托中 - 用
currentTarget替代this：避免箭头函数作用域问题 - 事件委托优化性能：减少事件绑定数量，动态元素无需重新绑定
- 兼容性处理：对老旧项目使用
target || srcElement
引用说明：本文内容参考MDN Web文档（Event.target、Event.currentTarget）及W3C DOM事件标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/34315.html
