js class 中绑定事件处理函数的核心是确保 this 指向实例，推荐用箭头函数（handleclick = () => {}）；次选 constructor 中 bind；临时绑定仅适用于简单场景；统一使用 addeventlistener 并注意解绑需同一函数引用。
在 JS class 中绑定事件处理函数，核心是解决 this 指向问题——方法被提取后（如传给 addEventListener）会丢失实例上下文。关键不在“怎么绑事件”，而在于“怎么让事件函数里的 this 仍指向当前实例”。
用箭头函数定义方法（最常用、推荐）
箭头函数不绑定自己的 this，而是继承外层作用域（即 class 实例）的 this，天然适合做事件回调。
- 必须用赋值语法写：
handleClick = () => { ... }，不能写成handleClick() { ... } - 每个实例都生成独立函数，内存开销极小，日常开发可忽略
- 子类无法通过
super.handleClick()调用（因它不在原型链上）
在 constructor 中用 bind 绑定（兼容旧环境或需原型复用）
把普通方法在实例创建时就绑定到当前实例，既保留原型方法特性，又确保 this 正确。
- 写法：
this.handleClick = this.handleClick.bind(this)，放在构造函数里 - 方法仍在原型上，子类可用
super.handleClick()，也利于函数复用 - 比箭头函数更省内存（所有实例共享同一个绑定后的函数引用）
调用时临时绑定（仅限一次性或简单场景）
在传入事件监听器时现场绑定，适合逻辑简单、不常复用的方法。
- 用
.bind(this)：btn.addEventListener('click', this.handleClick.bind(this)) - 用
.call()或.apply()不适用此处，因为它们是立即执行，不是传函数引用 - 缺点：每次绑定都新建函数，若频繁操作（如滚动、输入），可能影响性能
绑定事件本身用 addEventListener（不是 class 特有，但必须配合上述 this 处理）
事件绑定动作本身和 class 无关，统一推荐用 addEventListener：
- 支持多次绑定同一事件，不覆盖
- 可控制捕获/冒泡阶段，可配
{ once: true, passive: true }等选项 - 解绑必须传入**同一个函数引用**，所以避免用匿名函数：
btn.addEventListener('click', () => this.handleClick())会导致无法移除
