事件委托通过将点击监听绑定在父元素（如）上，利用事件冒泡机制实现高效、动态的事件处理。核心步骤包括：监听ul的click事件，用event.target.closest('li')获取被点击的li元素，并提取textcontent等信息，支持嵌套结构与动态添加项。

事件委托利用事件冒泡机制，把点击监听绑定在父元素（如 <ul></ul>）上，而不是为每个 <li> 单独绑定，既节省内存又支持动态添加的列表项。

核心实现步骤

关键在于：监听 ul 的点击事件，通过 event.target 判断是否点击了 li 元素。

• 给 <ul></ul> 添加 click 事件监听器
• 在回调中用 event.target 获取实际被点击的元素
• 用 element.matches('li') 或 element.tagName === 'LI' 做类型判断
• 可进一步用 element.textContent 或 element.dataset.id 获取具体信息

基础代码示例

HTML 结构：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

  
• 苹果

  
• 香蕉

  
• 橙子

JavaScript：

const ul = document.getElementById('myList');
ul.addEventListener('click', function (e) {
  if (e.target.matches('li')) {
    console.log('点击了：', e.target.textContent);
  }
});

处理嵌套内容和兼容性

如果 <li> 内有按钮、图标或 span，e.target 可能是子元素。此时应向上查找最近的 li：

• 用 e.target.closest('li') 替代直接匹配（推荐，简洁可靠）
• 避免使用 parentNode 多次判断，closest() 自动遍历祖先
• IE 不支持 closest()，可加简单 polyfill 或改用循环 + tagName 判断

ul.addEventListener('click', function (e) {
  const li = e.target.closest('li');
  if (li) {
    console.log('点击的 li 内容：', li.textContent.trim());
  }
});

动态添加列表项仍有效

因为监听的是父级 ul，后续用 JavaScript 插入的新 <li> 无需重新绑定事件：

const newLi = document.createElement('li');
newLi.textContent = '葡萄';
ul.appendChild(newLi);
// 点击它，上面的事件监听器依然响应

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