事件监听器应优先使用addEventListener绑定，及时清理防止内存泄漏，集中管理避免重复注册，并按场景选择委托、节流等优化策略。
事件监听器是响应用户操作或系统状态变化的核心机制，用对了能提升代码可读性、可维护性和健壮性。关键不在于“能不能加”，而在于“怎么加才合理、不重复、不泄漏”。
明确监听方式，优先用 addEventListener
现代标准做法是获取 DOM 元素后，调用 addEventListener() 绑定处理函数：
- 支持为同一事件添加多个监听器，互不覆盖
- 可指定第三个参数控制捕获/冒泡阶段（如
{ once: true, passive: true }） - 避免在 HTML 中写
onclick="..."或直接赋值el.onclick = fn，防止逻辑混杂和覆盖风险 - 示例：
document.getElementById('btn').addEventListener('click', handleClick);
及时清理，防止内存泄漏
监听器一旦绑定，若不手动移除，可能长期驻留内存，尤其在单页应用中容易积累：
- 动态创建的元素（如弹窗、列表项），在销毁前务必调用
removeEventListener() - 使用
{ once: true }选项自动清理一次性事件（如初始化完成、表单提交后） - 全局监听（如
window.scroll、window.resize）应在组件卸载或页面切换时统一解绑
集中管理，避免重复注册
多人协作或模块多次加载时，容易无意中重复绑定相同监听器，导致函数被调多次：
- 用标志位或 WeakMap 记录是否已绑定，避免重复执行
addEventListener - 全局事件建议通过统一入口管理，比如封装一个
globalEventHub模块，提供on()、off()、once()接口 - Vue/React 等框架中，优先使用生命周期钩子（如
mounted/useEffect）绑定与清理成对出现
按场景选择监听粒度与时机
不是所有事件都适合直接监听目标元素：
- 列表项很多时，别给每个
单独绑 click，改用事件委托：监听父容器，用event.target判断来源 - 高频事件（如
scroll、input）要做节流（throttle）或防抖（debounce），避免过度触发 - 移动端注意
passive: true提升滚动性能；触控事件优先用pointerdown而非touchstart，兼容性更好
