事件委托通过父元素监听+事件冒泡处理动态子元素事件；直接绑定因元素不存在或未重绑而失效；需选稳定父容器，用matches()或closest()判断目标，注意事件冒泡限制。
事件委托通过把事件监听器绑定在父元素上，利用事件冒泡机制来处理子元素（包括后续动态添加的）的事件，这样就不需要为每个新元素单独绑定事件。
为什么动态元素用直接绑定会失效
直接用 element.addEventListener() 绑定事件时，如果元素在绑定时尚未存在 DOM 中，就会报错或静默失败；即使后来动态插入了同名元素，也不会自动拥有事件监听器。这是因为在 JS 执行时，它只找到当时已存在的匹配元素。
用事件委托替代直接绑定
核心是监听父容器（必须始终存在），再在事件回调中判断 event.target 是否符合目标条件：
- 选择一个稳定存在的父级元素（如
document、body或某个固定容器） - 监听该父元素上的事件（如
click） - 在回调里用
event.target.matches(选择器)判断是否点击的是目标元素
示例：为所有未来可能添加的按钮（class="btn"）绑定点击事件
document.querySelector('#container').addEventListener('click', function(e) {
if (e.target.matches('.btn')) {
console.log('按钮被点了', e.target);
}
});
注意事件类型和冒泡限制
不是所有事件都支持冒泡，比如 focus、blur、change 默认不冒泡（可用 focusin/focusout 替代）。另外，如果中间某层调用了 e.stopPropagation()，事件就无法到达委托的父节点，导致委托失效。
现代写法推荐使用 closest()
相比 matches()，event.target.closest(选择器) 更灵活：它从目标元素自身开始向上查找，能匹配祖先元素，适合处理嵌套结构（比如按钮内有图标）：
document.addEventListener('click', function(e) {
const btn = e.target.closest('.btn');
if (btn) {
console.log('点中了按钮', btn);
}
});
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
