JavaScript 中事件委托怎么获取被点击的子项-js教程-PHP中文网

事件委托利用事件冒泡，在父元素监听事件并通过event.target获取原始点击目标，再用closest()向上查找匹配的子元素（如li），区分event.target（实际点击元素）和event.currenttarget（绑定事件的父元素）。

javascript 中事件委托怎么获取被点击的子项

事件委托的核心是利用事件冒泡，在父元素上监听事件，然后通过 event.target 获取真正被点击的子元素。

用 event.target 拿到原始点击目标

当点击某个子项时，事件会从该子项向上冒泡到委托的父元素。此时 event.target 始终指向最开始被点击的那个 DOM 节点（即子项），而不是绑定事件的父元素。

它可能是你期望的子元素（比如 <li>、<button></button>）
也可能是子元素内部更深层的节点（比如子项里的 <span></span> 或图标）
所以通常需要向上查找，确认是否属于目标类型

用 closest() 精准匹配目标子项

为避免 event.target 指向太深的嵌套节点，推荐用 element.closest(selector) 向上查找最近的匹配元素：

Alibabacloud Sdk Client Initialization For Java

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

下载

event.target.closest('li')：不管点的是 <li> 还是里面文字或图标，只要在某个 <li> 内，就返回那个 <li>
如果没找到匹配项，返回 null，可用来过滤非目标区域的点击
兼容性好（IE11+），现代项目基本无顾虑

注意区分 event.target 和 event.currentTarget

这是容易混淆的两个属性：

event.target：实际被点击的元素（源头）
event.currentTarget：当前绑定事件处理函数的元素（即委托的父容器）
在事件委托中，二者通常不同——前者是子项，后者是父项

完整示例：列表点击获取对应 li

HTML 结构：

苹果 (删除)
香蕉

JS 处理：

document.getElementById('list').addEventListener('click', function(e) {
  const item = e.target.closest('li');
  if (!item) return; // 点击区域不在 li 内，忽略

  console.log('点击了第', item.dataset.id, '项'); // 输出 1 或 2
});

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