event.target始终指向实际触发事件的最内层DOM元素；它与event.currentTarget（绑定监听器的元素）不同，常用于事件委托、精准定位交互目标，并需注意target可能是文本节点或非元素节点。

event.target 是事件对象的属性，它始终指向**实际触发事件的那个最内层元素**（即用户真正点击、输入或交互的 DOM 节点），而不是绑定事件监听器的元素。这是理解事件委托和精准响应用户操作的关键。

一、基本用法：直接获取被点击的元素

在事件处理函数中，通过 event.target 即可拿到当前点击的具体元素：

document.addEventListener('click', function(event) {
  console.log(event.target); // 点击哪个元素，这里就输出哪个
});

比如页面中有按钮、文字、图片，无论点哪，event.target 都是那个具体的节点（如 <button>、<span> 或 <img>）。

二、区分 event.target 和 event.currentTarget

event.target 是“谁被点”，event.currentTarget 是“谁绑了监听器”。二者常不同，尤其在事件冒泡时：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

• 给父容器绑定 click，点击子按钮 → target 是 <button>，currentTarget 是父 <div>
• 想操作被点击的元素，用 target；想操作监听器所在元素，用 currentTarget

三、配合事件委托使用（推荐场景）

当元素动态增删，或批量管理子项时，不需为每个子元素单独绑定事件，统一绑定到父级，再用 event.target 判断来源：

const list = document.getElementById('myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('点击了列表项：', event.target.textContent);
  }
});

注意：要防止点击到 <li> 内的其他标签（如 <span>），可用 closest() 向上查找最近匹配项：

if (event.target.closest('li')) {
  const clickedLi = event.target.closest('li');
  console.log('实际点击的 li 元素：', clickedLi);
}

四、常见注意事项

• target 可能是文本节点：如果点击纯文字（无标签包裹），event.target 可能是 #text 节点，建议用 event.target.parentElement 或 closest() 获取语义化元素
• 不要依赖 target 的 class 名直接判断：应先检查是否存在，再取值，避免报错：event.target.classList.contains('btn')
• 禁用/隐藏元素仍可能被 target 捕获：若需跳过，加判断：if (!event.target.matches(':disabled, [hidden]')) { ... }