addEventListener是绑定事件的唯一推荐方式，支持多次绑定、灵活控制捕获/冒泡阶段及自动清理（如once、passive、AbortController），移除时须保证函数引用一致，事件委托应绑定父元素并用e.target匹配目标。
事件监听器怎么绑定？用 addEventListener 是唯一推荐方式
现代 JavaScript 中，addEventListener 是绑定事件的首选，它支持同一元素上多次绑定同类型事件，且不会覆盖。直接赋值 onclick 属性或使用 HTML 内联写法（如 onclick="handler()"）会丢失灵活性，也难以管理生命周期。
常见错误是忽略第三个参数 options，导致捕获/冒泡阶段行为不符合预期，或无法及时清理监听器：
-
useCapture设为true时，事件在捕获阶段触发；默认false（冒泡阶段） - 需要自动移除时，可传入
{ once: true }—— 触发一次后自动解绑 - 想让事件响应更及时（比如滚动、输入），可加
{ passive: true }（但此时不能调用preventDefault()）
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function handler(e) {
console.log('clicked');
}, { once: true }); // 点一次就自动移除
移除监听器为什么经常失败？关键在函数引用必须一致
removeEventListener 不是“按事件类型清除”，而是严格比对函数引用。如果绑定时用了匿名函数或箭头函数，就无法移除 —— 因为每次定义都是新引用。
典型错误写法：
btn.addEventListener('click', () => console.log('hi'));
btn.removeEventListener('click', () => console.log('hi')); // ❌ 无效：两个箭头函数不是同一个引用
正确做法是保存函数引用，或使用具名函数：
function handleClick() {
console.log('clicked');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // ✅ 成功
如果必须用闭包或带参数的逻辑，建议封装成模块内变量或使用 AbortController（见下一条）。
用 AbortController 移除一批监听器更安全
当一个组件或模块需要批量绑定多个事件（比如 scroll、resize、keydown），又希望统一销毁时，手动记一堆函数引用容易遗漏。此时 AbortController 提供了声明式清理能力，Chrome 66+、Firefox 63+、Safari 15.4+ 均支持。
它的核心是把 signal 传给 addEventListener 的 options，之后调用 abort() 即可批量解绑所有关联监听器：
const controller = new AbortController();
const signal = controller.signal;
window.addEventListener('scroll', handleScroll, { signal });
document.addEventL
istener('keydown', handleKey, { signal });
// 后续某处统一清理
controller.abort(); // ✅ 所有带该 signal 的监听器自动移除
注意：abort() 只能调用一次；调用后再次添加带同一 signal 的监听器会立即报错 AbortError。
事件委托怎么绑定和移除？别在子元素上反复操作
动态增删 DOM 时，不要为每个子元素单独绑定/移除监听器。应该在父容器上用事件委托，通过 e.target 判断来源。
绑定只需一次：
const list = document.getElementById('itemList');
list.addEventListener('click', function(e) {
if (e.target.matches('li.delete-btn')) {
e.target.closest('li').remove();
}
});
移除时，只要移除父容器上的那个监听器即可，无需关心子元素是否还存在。但如果委托逻辑复杂、需频繁开关，仍建议用 AbortController 控制整个委托监听器的生命周期。
容易被忽略的是：委托监听器中忘记检查 e.target 是否为期望元素，导致误触发；或没用 closest() 向上找最近匹配祖先，而只判断了直接子节点。
