JavaScript操作DOM事件最常用addEventListener方法，支持多监听器与捕获阶段；事件委托通过父元素监听+event.target判断实现，适用于动态子元素，但focus/blur等不冒泡事件不可委托。
JavaScript操作DOM事件的核心是通过事件监听器绑定行为，而事件委托利用事件冒泡机制，把事件处理逻辑集中在父元素上，减少重复绑定、提升性能，也便于动态添加的子元素自动响应事件。
如何给元素绑定事件
最常用的是addEventListener方法，支持多个监听器、可选捕获阶段，并且比直接写onclick属性更灵活安全：
- 基本用法：element.addEventListener('click', handler)
- 避免重复绑定：可先用removeEventListener移除旧监听器（注意函数引用需一致）
- 推荐使用命名函数或箭头函数保存引用，方便后续移除
- 不推荐用element.onclick = handler，因为会覆盖已有点击逻辑
事件委托怎么实现
事件委托的关键在于：**监听父容器，判断触发源（event.target），再执行对应逻辑**。适用于列表、菜单、表格等大量子元素场景：
- 给父元素（如<ul>）绑定事件，而不是每个<li>
- 在回调中用event.target获取实际被点击的子元素
- 用closest()方法向上查找匹配的选择器（例如event.target.closest('li')），确保即使点到子标签（如<span>）也能准确定位目标项
- 示例：点击任意列表项时高亮它，新增的<li>无需重新绑定事件
需要注意的细节
事件委托不是万能的，有些情况不适用：
立即学习“Java免费学习笔记（深入）”；
- focus、blur、mouseenter、mouseleave不冒泡，不能委托
- 阻止冒泡（event.stopPropagation()）会中断委托链，慎用
- 委托层级不宜过深，否则target判断逻辑变复杂，影响可读性
- 移动端要注意click延迟问题，可改用touchstart并做兼容处理
一个简洁的委托示例
假设有一个动态生成的按钮列表：
<div id="btn-container"> <button data-id="1">按钮1</button> <button data-id="2">按钮2</button> </div>
只需绑定一次：
document.getElementById('btn-container').addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON') {
const id = e.target.dataset.id;
console.log('点击了ID为', id, '的按钮');
}
});
后续用JS插入新按钮，同样生效，无需额外绑定。
