在JavaScript中删除事件列表器

Question

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

类有一个函数'receaveKey',这个函数由addEventListener引用

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

这适用于我,但我的类有另一个功能"退出"当这个被调用时,我想删除该事件监听器,我尝试了这个,但确实有效.

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

旁注:拼写是"收到".

你要求的例子:

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>