动态添加和删除dom事件必须使用同一函数引用，命名函数或保存匿名函数引用方可正确移除；删除时需复用原引用，且选项对象须完全一致。
动态添加和删除 DOM 事件，核心在于正确使用 addEventListener 和 removeEventListener，且二者必须使用**同一个函数引用**才能成功移除。
添加事件：用命名函数或保存函数引用
匿名函数无法被精确移除，因此添加时应避免直接写 () => {...}。推荐两种安全方式：
- 使用命名函数：
function handleClick() { console.log('clicked'); }<br>button.addEventListener('click', handleClick); - 若需闭包或参数，先定义再传入：
const handler = (e) => { console.log(e.target); };<br>button.addEventListener('click', handler);
删除事件：必须传入完全相同的函数引用
removeEventListener 不会识别函数逻辑是否相同，只比对内存地址。以下写法无效：
button.removeEventListener('click', () => { ... });—— 新建的匿名函数，地址不同button.removeEventListener('click', function() { ... });—— 同样是新函数
正确做法是复用添加时的函数变量：
button.removeEventListener('click', handleClick); // ✅<br>button.removeEventListener('click', handler); // ✅
处理多个同类事件或动态元素
为避免重复绑定或漏删，可结合事件委托或标记机制：
- 用
data-属性记录状态：if (!button.hasAttribute('data-listening')) {<br> button.addEventListener('click', handleClick);<br> button.setAttribute('data-listening', 'true');<br>} - 委托到父级（如
document或容器），统一管理：container.addEventListener('click', e => {<br> if (e.target.matches('.dynamic-btn')) {<br> handleClick(e);<br> }<br>});
注意 once 和 passive 等选项的一致性
如果添加时用了选项对象，删除时也必须传入**完全相同的对象**（不是等价对象）：
- ✅ 正确：
const opts = { once: true, passive: false };<br>btn.addEventListener('touchstart', handler, opts);<br>btn.removeEventListener('touchstart', handler, opts); - ❌ 错误：
btn.removeEventListener('touchstart', handler, { once: true }); // 对象不同
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
