事件委托通过在静态父元素上绑定事件并利用事件冒泡机制捕获子元素点击，从而天然支持动态新增列表项；直接为每个绑定事件则因新元素无监听器而失效，核心是用event.target判断目标元素并确保父容器初始存在且稳定。

事件委托是通过给父元素绑定事件，利用事件冒泡机制捕获子元素的事件，从而自然支持动态新增的列表项——不需要为每个新元素单独绑定事件。

为什么用事件委托处理动态列表项

直接给每个列表项（如 <li>）绑定点击事件，在 DOM 动态添加新项后，新项没有事件监听器，点击无效。而事件委托把监听器放在不变的父容器（如 <ul></ul>）上，无论何时添加子元素，只要符合选择条件，点击都会被正确捕获。

核心写法：用 event.target 判断点击源

绑定事件时，检查 event.target 是否匹配目标子元素（比如 class 为 item 的 <li>），再执行对应逻辑：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target && e.target.classList.contains('item')) {
    console.log('点击了列表项：', e.target.textContent);
  }
});

确保父容器稳定且可选中

父元素不能是临时生成或频繁替换的节点，推荐使用有明确 ID 或 class 的容器：

• ✅ 好做法：父元素在页面加载时就存在，比如 <ul id="list"></ul>
• ❌ 避免：给动态生成的父容器（如每次重绘后新建的 <ul></ul>）绑定事件
• 如果整个列表区域会整体替换，可考虑委托到更外层的静态祖先，如 document 或 main 元素（但需谨慎，避免过度捕获）

处理事件代理中的 this 和 data

在委托回调里，this 指向父元素，不是被点击的子项。要用 e.target 获取实际点击元素，并从中提取数据：

• 从属性读取：e.target.dataset.id 或 e.target.getAttribute('data-id')
• 从结构获取：e.target.closest('li').dataset.id（兼容嵌套内容点击）
• 避免直接用 this.textContent，它返回父元素内容，不是点击项的内容

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