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

【问题标题】：How can I remove the event listener from a class method如何从类方法中删除事件侦听器
【发布时间】：2019-10-19 06:06:25
【问题描述】：

我正在尝试使用与添加事件侦听器相同的引用从函数中删除事件侦听器，但 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);
        }

    }
}

【问题讨论】：

您可能需要像在addListener 函数中那样使用binding。 this.elementoScroll.removeEventListener('scroll', this.onScroll.bind(this), true);
它甚至进入了if块吗？
@GetOffMyLawn，这是不正确的，绑定两次会导致两个不同的功能。 obj.method.bind(obj) !== obj.method.bind(obj)

标签： javascript

【解决方案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);
    }

  }
}

【讨论】：