如何从类方法中删除事件侦听器

Question

我正在尝试使用与添加事件侦听器相同的引用从函数中删除事件侦听器，但 removeEventListener 不起作用我想要 onScroll 方法停止监听滚动。export class LazyLoad {    constructor(elementoScroll, porcentagem, objetoAxios) {        this.elementoScroll = elementoScroll        console.log(this.elementoScroll.scrollTop)        this.porcentagem = porcentagem        this.objetoAxios = objetoAxios        this.endereco = objetoAxios        this.addListener()    }    addListener() {        this.elementoScroll.addEventListener('scroll', this.onScroll.bind(this), true);    }    onScroll(event) {        console.log(event)        let scrollPorcentagem = Math.floor(this.elementoScroll.scrollTop / (this.elementoScroll.scrollHeight - this.elementoScroll.clientHeight) * 100);        if(scrollPorcentagem >= 90) {            this.elementoScroll.removeEventListener('scroll', this.onScroll, true);        }    }}

Answer 1

你addEventListener和reoveEventListener调用的函数参数是不同的。要了解这一点，请看这个简化的示例：

class X { method() {} }

let x = new X();

console.log(x.method.bind(x) === x.method); // false

要解决此问题，请保留对添加事件侦听器时使用的函数的引用：

class LazyLoad {

  constructor(elementoScroll, porcentagem, objetoAxios) {

    this.elementoScroll = elementoScroll;

    console.log(this.elementoScroll.scrollTop);

    this.porcentagem = porcentagem;

    this.objetoAxios = objetoAxios;

    this.endereco = objetoAxios;

    this.addListener();

  }

  addListener() {

    this.listener = this.onScroll.bind(this);

    this.elementoScroll.addEventListener('scroll', listener, true);

  }

  onScroll(event) {

    console.log(event);

    let scrollPorcentagem = Math.floor(this.elementoScroll.scrollTop / (this.elementoScroll.scrollHeight - this.elementoScroll.clientHeight) * 100);

    if (scrollPorcentagem >= 90) {

      this.elementoScroll.removeEventListener('scroll', this.listener, true);

    }

  }

}