【TypeScript】Class中dom元素监听事件的this指向问题

class MyClass {
    private button: HTMLElement;
 
    constructor() {
        this.button = document.createElement('button');
        this.button.textContent = 'Click me';
        this.button.addEventListener('click', this.onButtonClick);
    }
 
    private onButtonClick = () => {
        // 在这里处理点击事件
    };
 
    public dispose() {
        // 移除事件监听器
        this.button.removeEventListener('click', this.onButtonClick);
    }
}
 
// 使用 MyClass
const myInstance = new MyClass();
 
// 当不再需要监听事件时，可以调用 dispose 方法
myInstance.dispose();

这个例子展示了如何在 TypeScript 中创建一个类来处理 DOM 元素的点击事件，并确保在不需要监听事件时能够正确地移除事件监听器，避免内存泄漏。通过使用箭头函数定义 onButtonClick 方法，我们确保 this 关键字指向正确的实例。