Question

我现在似乎处于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 附加的侦听器，但也没有找到任何一种方法。对解决此问题的最佳方法有任何想法吗？

Answer 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
    )
  }
}

如何在javascript / typescript事件回调中访问此代码，同时保留removeEventListener的功能？

1 个答案: