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

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

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

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

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

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

Alibabacloud Sdk Client Initialization For Java

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

下载

二、区分 event.target 和 event.currentTarget

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

• 给父容器绑定 click，点击子按钮 → target 是 <button></button>，currentTarget 是父 <div> <li>想操作被点击的元素，用 <strong>target</strong>；想操作监听器所在元素，用 <strong>currentTarget</strong> </li> <h3>三、配合事件委托使用（推荐场景）</h3> <p>当元素动态增删，或批量管理子项时，不需为每个子元素单独绑定事件，统一绑定到父级，再用 <strong>event.target</strong> 判断来源：</p> <font color="#666"> <pre class="brush:php;toolbar:false;">const list = document.getElementById('myList'); list.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('点击了列表项：', event.target.textContent); } });</pre> </font> <p>注意：要防止点击到 <code><li> 内的其他标签（如 <span></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]')) { ... }