Question

我不确定如何存储对匿名事件侦听器的引用，因此以后可以将其删除。

这：Removing an anonymous event listener2并没有帮助我。

   class Dragable
    {
        constructor(gameObject)
        {
            //Store reference to the event handler.
            document.addEventListener('mousedown', (mouseEvent) => this.click(mouseEvent));

        }

        click(mouseEvent)
        {
            console.log("Clicking..");
            //Remove eventhandler by reference.
        }
     }

Answer 1

存储引用，然后再将其传递给函数。然后在需要的地方使用它。

this.listener = (mouseEvent) => this.click(mouseEvent)
document.addEventListener('mousedown', this.listener);

Answer 2

我相信原因是因为您想这样做，是让this指向您的对象实例而不是文档，对吗？

在这种情况下，您实际上可以做几件事。

1）只需将函数的引用存储在对象中即可：

   class Dragable {
     constructor(gameObject) {
       this._listener = (mouseEvent) => this.click(mouseEvent);
       document.addEventListener('mousedown', this._listener)
     }

     click(mouseEvent) {
       console.log("Clicking..");
       //Remove eventhandler by reference.
      }

      destroy() {
        document.removeEventListener('mousedown', this._listener)
      }
  }

此外，如果您在模块中，则可以将_listener封装为私有符号，以免从外部轻松访问它。

2）使用静态“单击”处理程序，然后将其绑定到实例：

  class Dragable {
    constructor(gameObject) {
      this.click = Dragable.click.bind(this);
      document.addEventListener('mousedown', this.click)
    }

    static click(mouseEvent) {
      console.log("Clicking..");
      //Remove eventhandler by reference.
     }

     destroy() {
       document.removeEventListener('mousedown', this.click)
     }
  }

（您也可以避免使用static，而只使用this.click = this.click.bind(this)，但我不喜欢这样覆盖，但这是个人喜好）

3）您可以使用事件处理程序对象代替函数：

  class Dragable {
    constructor(gameObject) {
      document.addEventListener('mousedown', this);
    }


    handleEvent(mouseEvent) {
      console.log("Clicking..");
      //Remove eventhandler by reference.
     }

     destroy() {
       document.removeEventListener('mousedown', this)
     }
  }

在handleEvent内使用this.click，this将指向您的对象实例而不是文档：请注意，如果要订阅多个事件，则必须使用{{1 }}委派给正确的方法。有关它的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/EventListener/handleEvent

如何存储对匿名事件侦听器的引用？

2 个答案: