javascript - 删除 JavaScript 中的事件监听器

Question

这个问题已经有答案了:

Javascript removeEventListener not working inside a class [duplicate] (1 个回答)

已关闭 7 年前。

我在 JavaScript 中创建了一个类，该类在启动类时执行与特定任务相关的按键调用(按键)。

类有一个函数“receaveKey”，它由 addEventListener 引用，如下所示

 document.addEventListener("keypress",this.receaveKey.bind(this));

这对我有用，但我的类(class)有另一个功能“退出”当调用此函数时，我想删除该事件监听器，我尝试了此操作，但确实有效。

document.removeEventListener("keypress",this.receaveKey.bind(this));

注意:-我也尝试过这个，但有一个问题，我无法提供类的启动对象的引用，因为当使用类的“函数”按下按键时，我还必须执行一些任务。

document.addEventListener("keypress",staticClassReceaveKey);

document.removeEventListener("keypress",staticClassReceaveKey);

注意:-我也尝试过这个

document.addEventListener("keypress",this.receaveKey);

    document.removeEventListener("keypress",this.receaveKey);

但是没有找到任何运气，因为当使用类的方法作为引用函数时监听器没有被删除

Answer 1

您必须删除添加的相同函数，但bind始终返回新函数。

所以你必须记住第一个，然后在删除时使用它:

this.boundReceaveKey = this.receaveKey.bind(this);
document.addEventListener("keypress",this.boundReceaveKey);

// ...later...
document.removeEventListener("keypress",this.boundReceaveKey);
this.boundReceaveKey = undefined; // If you don't need it anymore

<小时/>

旁注:拼写为“receive”。

<小时/>

您请求的示例:

function Thingy(name) {
  this.name = name;
  this.element = document.getElementById("the-button");
  this.bindEvents();
}
Thingy.prototype.bindEvents = function() {
  if (!this.boundReceiveClick) {
    this.boundReceiveClick = this.receiveClick.bind(this);
    this.element.addEventListener("click", this.boundReceiveClick, false);
  }
};
Thingy.prototype.unbindEvents = function() {
  if (this.boundReceiveClick) {
    this.element.removeEventListener("click", this.boundReceiveClick, false);
    this.boundReceiveClick = undefined;
  }
};
Thingy.prototype.receiveClick = function() {
  var p = document.createElement("p");
  p.innerHTML = "Click received, name = " + this.name;
  document.body.appendChild(p);
};

var t = new Thingy("thingy");
t.bindEvents();

document.getElementById("the-checkbox").addEventListener("click", function() {
  if (this.checked) {
    t.bindEvents();
  } else {
    t.unbindEvents();
  }
}, false);

<input id="the-button" type="button" value="Click me">
<br><label><input id="the-checkbox" type="checkbox" checked> Bound, when this is unchecked the button won't do anything</label>