Javascript 如何删除使用“0”的事件侦听器；这"；打字稿？

在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

实例，并且很少使用它们的

onClick

侦听器，这可能会对内存使用产生负面影响。

在typescript中，很难知道函数调用是什么，尤其是当您“绑定”它时。例如：

HTML

还有一些创建两个对象的代码

let x = new MyClass("I am one", "One");
let y = new MyClass("and I am two", "Two");

我的班级

class MyClass {
    private _myInstance: string;
    constructor(ID: string, domID: string) {
        this._myInstance = ID;
        document.getElementById(domID).addEventListener('click', this.print.bind(this));
    }

    public print() {
        console.log(this._myInstance);
    }
}

单击“一”a元素时，您将获得“我是一”，单击第二个a元素时，您将获得“我是二”

这种情况更难消除。您需要添加包含绑定的对象变量，以便my类更改为：

class MyClass {
    private _myInstance: string;
    private _myDomID: string;
    private _myFunc = this.print.bind(this);
    constructor(ID: string, domID: string) {
        this._myInstance = ID;
        this._myDomID = domID;
        document.getElementById(domID).addEventListener('click', this._myFunc);
    }

    public print() {
        console.log(this._myInstance);
    }

    public cleanUp() {
        document.getElementById(this._myDomID).removeEventListener('click', this._myFunc);
    }

---

}

已经回答了这个问题，但我认为这里的答案并不是关于OOP的精心设计的。因此，以下是我的解决方案：

export class MyClass {

  // create member that holds the function reference
  protected clickEventListener: EventListener;      

  // inject the Element
  constructor(protected theElement: Element) {   
    // wrap the class function `onClick` in an arrow function and assign 
    // to the class member `clickEventListener`   
    this.clickEventListener = () => this.onClick(); 
  }

  onClick() {
    console.log("clicked");
  }

  init() {
    // add the event listener to `theElement` and pass only the reference 
    // of `this.clickEventListener` (no round brackets '()')
    this.theElement.addEventListener("click", this.clickEventListener); 
  }

  destroy() {
    // to remve the event listener also just pass the `clickEventListener` reference
    this.theElement.removeEventListener("click", this.clickEventListener); 
  }

}

---

您必须保留对正在添加的匿名事件侦听器的引用。你没有提供足够的信息给你一个更准确的答案。您可以在构造函数中执行

this.onClick=this.onClick.bind（this）

，然后您可以摆脱匿名函数，编写

element.addEventListener（“单击”，this.onClick）

。在这种情况下，f的类型是什么？var f：函数？如果在onClick2的情况下返回函数，如何解除事件绑定。您不需要一开始用来添加事件的函数实例吗？@Stewart您是对的，我修复了代码中的错误。在您展示的示例中，您可以对onClick和onClick2使用static。如果类中有一个私有变量，那么addEventListener需要有这个.onClick.bind（这个）…并且remove将不起作用。我还没有解决方案。最后一个代码块，

onClick2=（）=>{}

不是有效的javascript。至少在ES6中？我觉得大多数的回答都没有达到目的。这是一个非常清晰和干净的解决方案，在我的用例中非常有效。没有细节上的混淆，感觉很像打字脚本。谢谢！