事件委托通过将点击监听绑定在父元素（如<ul>）上，利用事件冒泡机制实现高效、动态的事件处理。核心步骤包括：监听ul的click事件，用event.target.closest('li')获取被点击的li元素，并提取textContent等信息，支持嵌套结构与动态添加项。
事件委托利用事件冒泡机制，把点击监听绑定在父元素（如 <ul>）上，而不是为每个 <li> 单独绑定，既节省内存又支持动态添加的列表项。
核心实现步骤
关键在于：监听 ul 的点击事件，通过 event.target 判断是否点击了 li 元素。
- 给
<ul>添加click事件监听器 - 在回调中用
event.target获取实际被点击的元素 - 用
element.matches('li')或element.tagName === 'LI'做类型判断 - 可进一步用
element.textContent或element.dataset.id获取具体信息
基础代码示例
HTML 结构：
<ul id="myList"><li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
JavaScript：
立即学习“Java免费学习笔记（深入）”；
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判断
const li = e.target.closest('li');
if (li) {
console.log('点击的 li 内容：', li.textContent.trim());
}
});
动态添加列表项仍有效
因为监听的是父级 ul，后续用 JavaScript 插入的新 <li> 无需重新绑定事件：
newLi.textContent = '葡萄';
ul.appendChild(newLi);
// 点击它，上面的事件监听器依然响应
