的 ID " />

本文讲解为何直接使用 event.target.id 无法获取含子元素的 <li> 的 ID，并提供基于 event.currentTarget 的可靠解决方案，确保无论点击链接、文本还是内联标签，都能准确捕获目标 <li> 的 id 属性。

本文讲解为何直接使用 `event.target.id` 无法获取含子元素的 `

` 的 id，并提供基于 `event.currenttarget` 的可靠解决方案，确保无论点击链接、文本还是内联标签，都能准确捕获目标 `

` 的 `id` 属性。

在处理列表项点击事件时，一个常见误区是依赖 event.target 来读取 id。实际上，event.target 指向实际被点击的最内层 DOM 节点（如 <a> 或 <span>），而非绑定事件的容器元素。由于这些子元素未设置 id，e.target.id 返回 undefined，导致 console.log 被跳过。

正确的做法是将事件监听器直接绑定到目标 <li> 元素上，并使用 event.currentTarget —— 它始终指向当前事件监听器所绑定的元素，即你期望的带 id 的 <li>。

✅ 推荐写法（精准、简洁、语义清晰）

// 精确选择所有 .words 下的 li 元素（避免对 .words 整体监听）
const listItems = document.querySelectorAll('.words ul li');

listItems.forEach(item => {
  item.addEventListener('click', e => {
    // currentTarget 始终是当前绑定事件的 li 元素
    if (!e.currentTarget.id) return;
    console.log('id:', e.currentTarget.id);
  });
});

✅ 优势说明：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 无需事件委托或向上遍历：currentTarget 天然可靠，比 e.target.closest('li') 更高效；
• 语义明确：监听目标即业务目标（每个 <li>），逻辑更直观；
• 兼容性强：适用于任意嵌套结构（<a>、<span>、<strong> 等）；
• 无副作用：不干扰原生事件流，也不需阻止默认行为。

⚠️ 注意事项

• 不要对 .words 容器整体监听并用 e.target.id 判断——这会因点击子元素而失败；
• 避免使用 e.target.parentElement.id 或 e.target.closest('li').id（需额外空值判断，且在深层嵌套时易出错）；
• 若 <li> 动态生成，建议改用事件委托（监听 <ul>，再用 e.target.closest('li')），但静态列表优先推荐直接绑定。

✅ 补充：动态列表的稳健方案（事件委托）

document.querySelector('.words ul').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li && li.id) {
    console.log('id:', li.id);
  }
});

总结：event.currentTarget 是解决“点击子元素却想获取父容器 ID”问题的最直接、最可靠的方案。只要将监听器精确绑定到目标元素（如 <li>），就能彻底规避 target 与 currentTarget 的混淆，写出健壮、可维护的交互代码。

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