class中处理dom事件需确保绑定可追踪、移除可控制、作用域清晰：用命名函数或类字段函数替代箭头函数，统一管理监听器支持批量销毁，善用事件委托，结合生命周期自动绑定与解绑。
在 Class 中处理 DOM 事件，核心是让事件逻辑与实例生命周期对齐：绑定要可追踪，移除要可控制，作用域要清晰，避免内存泄漏和重复绑定。
用命名函数代替箭头函数或匿名函数
箭头函数和匿名函数每次调用都会生成新引用，无法被 removeEventListener 正确识别。应把事件处理器定义为类的命名方法或类字段函数：
- ✅ 推荐写法（方法声明）：
handleClick(event) { console.log(this.id, 'clicked'); }
绑定时：this.button.addEventListener('click', this.handleClick.bind(this)) - ✅ 更优写法（类字段语法，自动绑定 this）：
handleClick = (event) => { console.log(this.id, 'clicked'); };
绑定时：this.button.addEventListener('click', this.handleClick) - ❌ 避免写法：
this.button.addEventListener('click', (e) => { ... })—— 无法移除
统一管理事件监听器，支持批量销毁
在类中维护一个监听器注册表，便于在实例销毁（如组件卸载）时一键清理：
Nutrient Document Processing (Universal Agent Skill)
下载
一款AI办公效率工具，主要用于适用于兼容 Agent Skills 产品的通用（非 OpenClaw）Nutrient DWS 文档处理技能。最佳搭配：Claude Code、Codex CLI、Gemini CLI、Cursor、Wi...，适合需要提升相关任务效率的用户。
- 声明私有数组：
this._eventListeners = []; - 封装添加逻辑：
on(target, type, handler, options) { target.addEventListener(type, handler, options); this._eventListeners.push(() => target.removeEventListener(type, handler, options)); } - 提供销毁入口：
destroy() { this._eventListeners.forEach(unbind => unbind()); this._eventListeners = []; }
善用事件委托，减少监听器数量
当操作多个同类元素（如列表项、卡片按钮）时，不要逐个绑定，而是监听父容器，通过 event.target 判断来源：
- 在构造函数中：
this.list.addEventListener('click', this.handleListClick) - 在
handleListClick中：
if (event.target.matches('.item-delete')) { this.deleteItem(event.target.dataset.id); } - 优势：动态增删子元素无需重绑，性能更稳定，代码更简洁
结合生命周期，自动绑定与解绑
在类中模拟“挂载/卸载”语义（如类似 React 的 componentDidMount / componentWillUnmount）：
-
mount()中集中绑定事件、启动定时器、监听 Resize 等 -
unmount()中调用destroy()清理所有副作用 - 若用于 Web Components，可在
connectedCallback中调用mount，在disconnectedCallback中调用unmount
