在ES6类中移除事件监听器：能否在类内删除按钮监听？

完全可以在Pet类内部删除按钮的click事件监听器，不需要非要在全局环境操作，但得先调整你的代码结构，解决两个关键问题：

• 原来的myButton是doStuff()方法里的局部变量，类的其他方法根本访问不到它，自然没法调用它的removeEventListener
• 直接把this.sayHello绑定给事件时，函数的this指向会变成按钮元素，而且如果不提前固定函数引用，后续移除时可能因为引用不匹配失败

调整后的代码示例 #

class Pet {
  constructor () {
    this.age = 10;
    this.name = "Boris";
    // 1. 把按钮设为实例属性，让类内所有方法都能访问
    this.myButton = null;
    // 2. 提前绑定sayHello的this指向，确保事件绑定和移除用的是同一个函数引用
    this.sayHello = this.sayHello.bind(this);
  }

  sayHello () {
    console.log(`Bark Bark! I'm ${this.name}`);
  }

  doStuff() {
    this.myButton = document.createElement('button');
    this.myButton.innerText = "Click me!";
    document.body.appendChild(this.myButton);
    this.myButton.addEventListener('click', this.sayHello);
  }

  // 在类内部新增移除监听器的方法
  removeHelloListener() {
    if (this.myButton) {
      this.myButton.removeEventListener('click', this.sayHello);
      console.log("监听器已移除");
    }
  }
}

const myPet = new Pet();
myPet.doStuff();
// 可以在全局调用类内的方法来移除，也可以在类内部的其他逻辑里调用这个方法
// myPet.removeHelloListener();

关键说明 #

1. 把按钮存为实例属性：通过this.myButton将按钮对象挂载到实例上，这样类的任何方法都能直接访问到这个按钮实例。
2. 绑定函数引用：在constructor里用bind固定sayHello的this指向，同时保证事件绑定和移除时用的是同一个函数引用——removeEventListener要求必须和绑定的函数引用完全一致才能生效。
3. 类内方法处理移除：新增的removeHelloListener方法可以直接在类内部调用（比如某个条件触发时自动移除），也可以在全局通过实例调用，灵活度很高。

如果非要在全局环境移除，也不是不行，但你得想办法拿到按钮实例和正确的函数引用——比如把按钮挂载到全局，或者从DOM里查询到它，但这种写法耦合性高，远不如在类内部处理优雅。

内容的提问来源于stack exchange，提问作者Brixsta