如何删除在 TypeScript 中使用“this”的事件监听器？

在 JavaScript 中，对于需要访问私有成员和函数的事件处理程序，我可以依赖在我的事件处理程序函数中可访问的函数范围，并执行如下操作：

theElement.addEventListener("click", onClick);

然后：

theElement.removeEventListener("click", onClick);

在 TypeScript 中，我需要使用匿名函数来获得this是包含对象，如下所示：

theElement.addEventListener("click", (event) => this.onClick(event));

在这种情况下，我无法从监听事件中删除匿名函数。如何将事件侦听器作为类的一部分（可以访问私有字段和方法），以便稍后删除？

首先，即使你这样写，JavaScript 和 TypeScript 的行为方式也完全相同：

theElement.addEventListener("click", onClick);

其次，这是保留对匿名函数的引用的方法：

var f = (event) => this.onClick(event);
theElement.addEventListener("click", f);
// later
theElement.removeEventListener("click", f);

如果您正在处理事件侦听器，则可以使用一种有用的模式来绑定您的类方法：

class MyClass {
    init(theElement) {
        theElement.addEventListener("click", this.onClick);
        theElement.addEventListener("click", this.onClick2);
    }
    print() {
        console.log("print");
    }
    onClick() {
        this.print() // possible error (`this` is not guaranteed to be MyClass)
    }

    onClick2 = () => {
        this.print() // no error, `this` is guaranteed to be of type MyClass
    }
}

但请记住，此代码将创建一个单独的函数onClick2对于类的每个对象MyClass。如果您创建大量内存，这可能会对您的内存使用产生负面影响MyClass实例并且很少使用它们onClick听众。