当点击包含子元素（如<a>或<span>）的<li>时，原代码因监听.words容器且依赖e.target.id而失败；应改用事件委托或直接绑定到<li>并使用e.currentTarget.id确保获取父级ID。
当点击包含子元素（如``或``）的`
在处理列表项点击事件时，一个常见误区是混淆 event.target 与 event.currentTarget：
- e.target 指向实际被点击的最内层元素（例如 <a> 或 <span>），它通常没有 id 属性；
- e.currentTarget 指向当前事件监听器所绑定的元素（即你添加 addEventListener 的那个 DOM 节点），它才是你期望拥有 id 的 <li>。
因此，修复的关键在于：将事件监听器直接绑定到每个 <li> 元素上，并使用 e.currentTarget.id 获取其 ID，而非依赖 e.target.id。
以下是优化后的完整示例代码：
// 精确选择所有带 .words 类下的 li 元素（推荐）
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 结构保持不变：
立即学习“前端免费学习笔记（深入）”；
<div class="words">
<ul>
<li id="daily.commitment"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">daily.commitment</a></li>
<li id="universe.fend"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">universe.fend</a></li>
<li id="trite.hog"><span>trite.hog in span</span></li>
</ul>
</div>✅ 优势说明：
- 无需修改 HTML 结构（保留 <a>、<span> 等嵌套内容）；
- 逻辑清晰、性能可控（避免过度委托）；
- 兼容所有现代浏览器，无 polyfill 依赖。
⚠️ 注意事项：
- 若列表动态生成，建议改用事件委托（监听 <ul> 并判断 e.target.closest('li')），以避免重复绑定；
- id 值含英文点号（如 "daily.commitment"）是合法的，但若后续用于 CSS 选择器或 jQuery，需转义（如 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdaily\.commitment）；
- 避免在 e.target 上做 ID 判断——这是根本性误用，应始终基于事件绑定目标（currentTarget）或显式向上查找（closest()）。
总结：掌握 target 与 currentTarget 的区别，是写出健壮 DOM 事件处理逻辑的基础。优先绑定到语义明确的父级元素，并使用 currentTarget 获取上下文信息，可大幅提升代码可维护性与鲁棒性。
