事件委托最高效，利用事件冒泡在父元素统一处理子元素点击；避免重复绑定、支持动态元素、节省内存、代码更简洁；通过event.target或closest()识别目标，注意表单元素边界及data属性优化。
在父元素中捕获所有子元素的点击，用 事件委托（Event Delegation） 最高效、最常用。它利用事件冒泡机制，把监听器绑定在父元素上，统一处理子元素的点击，无需为每个子元素单独绑定事件。
为什么推荐用事件委托？
避免频繁绑定/解绑事件；动态添加的子元素自动生效；减少内存占用和性能开销；代码更简洁可维护。
基础写法：用 event.target 判断点击源
监听父元素的 click 事件，通过 event.target 获取实际被点击的元素，再判断是否符合目标子元素条件：
- 父元素需有明确的 DOM 引用（如
document.getElementById('container')） - 在回调中检查
event.target是否匹配目标（比如 class、tagName 或 data 属性） - 可用
closest()方法向上查找最近的符合条件的祖先（含自身），更灵活可靠
const parent = document.getElementById('list');
parent.addEventListener('click', function(e) {
const item = e.target.closest('.item'); // 点击 .item 或其内部任意子节点都算
if (item) {
console.log('点击了列表项：', item.textContent);
}
});
注意边界情况
某些元素（如 <input type="checkbox">、<button></button>）可能自带行为或阻止冒泡，需留意：
- 确保子元素没调用
e.stopPropagation() - 若子元素是表单控件，点击后焦点变化不影响委托逻辑，但需手动触发对应行为（如切换 checkbox 状态）
- 避免监听
<select></select>或<option></option>的点击——它们不支持原生 click 事件冒泡到父级
进阶：用 dataset 或自定义属性增强可维护性
给子元素加 data-action 属性，让父元素按动作类型分发处理：
- HTML 中：
<button data-action="delete" data-id="123">删</button> - JS 中：
if (e.target.dataset.action === 'delete') { ... } - 配合
e.target.dataset.id直接获取业务数据，避免查 DOM 或解析文本
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
