如何在 javascript/typescript 事件回调中访问它，同时保留 removeEventListener 的能力？ [复制]

Posted 2023-02-22

【中文标题】如何在 javascript/typescript 事件回调中访问它，同时保留 removeEventListener 的能力？ [复制]

【英文标题】：How to access this in javascript/typescript event callback, while retaining ability to removeEventListener? [duplicate]

【发布时间】：2019-04-20 13:41:01

【问题描述】：

我现在似乎处于 catch-22 中，我想在 javascript/typescript 对象中附加一个事件侦听器（并在我的回调函数中保留对 this 的访问权限），但我需要删除所述事件听众也是。通常，设置这样的回调（可以访问this）使用匿名函数，例如：

class MyClass 
  property = 'testing...';

  constructor(public element: htmlElement)       

  attachListener() 
    this.element.addEventListener(
      'mouseover',
      () =>  console.log(this.property); 
    );
  

  removeListener() 
    this.element.removeEventListener(
      'mouseover',
      PROBLEM!
    )
  

显然这不起作用，因为我的回调是匿名的，因此我无法删除它。在我的情况下，这将是唯一的 mouseover 事件，所以我可以删除 all 附加的侦听器，但也没有找到方法来做到这一点。对解决此问题的最佳方法有何想法？

【参考方案1】：

让处理程序成为类方法，而不是匿名函数

class MyClass 
  property = 'testing...';

  constructor(public element: HTMLElement) 
     this.handleMouseOver = this.handleMouseOver.bind(this)
  


  handleMouseOver(event) 
    console.log(this.property)
  

  attachListener() 
    this.element.addEventListener(
      'mouseover',
      this.handleMouseOver
    );
  

  removeListener() 
    this.element.removeEventListener(
      'mouseover',
      this.handleMouseOver
    )
  

【讨论】：

谢谢！看来我想太多了（尽管我发誓我过去在将类方法直接传递给事件侦听器时遇到了问题）。在我的实际代码中，我只是使用匿名函数调用this.someMethod()，所以效果很好！

啊...可能必须将this.handleMouseOver = this.handleMouseOver.bind(this) 放入构造函数中。将在答案中更新

现在console.log(this.property) 不再工作了