应优先使用addEventListener而非onclick，因其支持多次绑定、可移除且更灵活；移除时须保留函数引用并确保参数一致，动态元素推荐事件委托，组件卸载等场景必须手动清理以防内存泄漏。
JavaScript 事件监听器不是“绑上就完事”，关键在什么时候绑、绑给谁、用什么方式绑，以及——更重要的是，什么时候必须移除。
addEventListener 和 onclick 的核心区别在哪
onclick 是元素的属性，赋值即覆盖；addEventListener 是注册机制，支持同一事件多次绑定不同处理函数。日常开发中应优先使用 addEventListener，除非明确只需要一个简单内联响应。
-
onclick只能存一个函数，第二次赋值会直接丢掉第一次 -
addEventListener允许为同一个元素、同一事件类型添加多个监听器 -
onclick无法通过标准 API 移除（除非设为null），而removeEventListener要求传入**完全相同的函数引用**才能成功移除 - 使用箭头函数或匿名函数绑定时，
removeEventListener基本失效——因为无法复用函数引用
如何安全地绑定并后续移除事件监听器
要能移除，就必须保留对监听函数的引用，并确保参数和捕获阶段一致。常见错误是：用箭头函数绑定，然后试图用另一个箭头函数去移除。
- 把监听函数声明为具名函数或变量，例如：
const handleClick = () => { ... };，再传给addEventListener - 移除时调用
removeEventListener('click', handleClick, false)，第三个参数必须和绑定时一致（默认false表示冒泡阶段） - 若绑定时用了
{ once: true }选项，则无需手动移除，触发一次后自动解绑 - 对于动态创建的元素（如列表项），推荐用事件委托：绑定在父容器上，用
event.target判断实际点击对象
事件委托怎么写才不漏掉目标元素
事件委托依赖事件冒泡，但前提是目标元素不能阻止冒泡（event.stopPropagation()），也不能被 pointer-events: none 等 CSS 隐藏交互能力。
立即学习“Java免费学习笔记（深入）”；
- 绑定在有稳定生命周期的祖先节点上，比如
document.getElementById('list') - 监听事件类型选冒泡版（如
'click'而非'click'加capture: true） - 用
event.target.matches('.item-btn')或event.target.classList.contains('delete')做精准匹配 - 避免用
event.target === element，因为子元素（如图标、文字）也可能被点中，此时target是子节点而非预期的父容器
哪些场景下不移除监听器会导致内存泄漏
最典型的是：绑定在全局对象（window、document）或长生命周期 DOM 节点上，且监听器引用了局部大对象、闭包变量或 React/Vue 组件实例。
- 单页应用中，组件卸载（unmount）时未清理
addEventListener，监听器仍持有组件引用，导致整个组件无法被 GC - 轮播图、弹窗等模块反复创建销毁，每次都在
document上新增监听却从不清理 - 用
setTimeout+addEventListener实现防抖绑定，但忘记在超时前取消旧监听 - 现代框架（React、Vue）通常封装了自动清理逻辑，但手写原生 JS 模块时，这个责任完全落在开发者身上
真正难的不是“怎么绑”，而是“什么时候该解绑”——尤其当监听器藏在闭包里、被多个模块共享、或依赖异步状态时，函数引用容易丢失，移除就变成盲操作。
