javascript - 删除对象文字中的事件监听器丢失此引用

Question

目前正在使用 OLOO 风格的方法开发一个小型项目。 Problem found here

所以我面临的问题是我有一个事件处理程序。

eventHandler: function() {
    console.log('Hit');
    testSelector.removeEventListener('click', this.eventHandler, false);
  }

现在发生的情况是我希望在第一次点击后将其删除。然而，这似乎并不像我预期的那样工作。我正在绑定(bind)该引用的对象，但这里实际发生的事情似乎缺少一些东西。有人能澄清到底发生了什么或者我错在哪里吗？

Answer 1

我不是 OLOO 专家，但我可以在您的示例中看到两个问题:

• eventListener 回调处理程序中的 this 引用该节点，因此您需要注意在两种方法中引用相同的 this (添加/删除事件监听器)

• 如果监听器参数与 addEventListener 不同，removeEventListener 将不起作用，并且当您使用 bind 时实际上正在创建一个新函数(因此您必须跟踪它)

在代码中:

var testSelector = document.querySelector('.test');

var object = {
  init: function() {
    this.ref = this.eventHandler.bind(this)
    testSelector.addEventListener('click', this.ref, false);
  },
  eventHandler: function() {
    console.log('Hit');
    testSelector.removeEventListener('click', this.ref, false);
  }
}

object.init();

https://jsbin.com/hejenuraba/1/edit?js,console,output