Question

我有一个类，该类具有在元素上设置事件侦听器的方法。由于我需要类属性可用于该元素，因此将处理程序函数封装在另一个函数中。这行得通-但是稍后，我需要删除事件侦听器，该事件侦听器不起作用，因为处理事件的函数从技术上讲是匿名函数。

我知道为什么removeEventListener()不起作用，但是我如何首先编写addEventListener()而又不必以这种方式创建新函数？

以下是Codepen上的相同示例：https://codepen.io/crankysparrow/pen/LKEaqV

class Click {
  constructor(button) {
    this.button = button;
    this.message = 'hello';
  }

  static create() {
    let button = document.createElement('div');
    button.id = 'eventlistener';
    document.body.appendChild(button);
    return new Click(button);
  }

  alert() {
    alert(this.message);
  }

  listen() {
    this.button.addEventListener('click', () => {
      this.alert();
    });
  }

  removeListen() {
    this.button.removeEventListener('click', () => {
      this.alert()
    })
  }

}

let click = Click.create();
click.listen(); //this works fine
click.removeListen(); //does not work

在JavaScript中删除封装的eventListener

0 个答案: