如何使用.bind(this)删除对象的事件侦听器?

时间:2015-02-23 01:42:23

标签: javascript javascript-events event-handling

内部对象构造函数:

this.notification.addEventListener(barcodeScanner.NEW_READING, this.handleBarcode.bind(this));

当它消失的时候:

this.notification.removeEventListener(barcodeScanner.NEW_READING, this.handleBarcode.bind(this), this);

我可以添加事件监听器并且正常工作但是当对象销毁时我无法删除单个事件监听器。

虽然它与问题没有多大关系,但我使用的是EventDispatcher.js和Class.js.

我可以修改EventDispatcher.js中的代码以满足我的需要。但是如何在不删除所有其他侦听器的情况下删除objcet函数的事件侦听器?

2 个答案:

答案 0 :(得分:9)

它没有被移除,因为它是不同的对象。

.bind()每次都会返回一个新对象。

您需要将其存储在某处并使用它来删除:

var handler = this.handleBarcode.bind(this);

然后

this.notification.addEventListener(barcodeScanner.NEW_READING, handler);

this.notification.removeEventListener(barcodeScanner.NEW_READING, handler);

答案 1 :(得分:1)

以下是如何绑定取消绑定 事件处理程序 某些组件强>:

var o = {
  list: [1, 2, 3, 4],
  add: function () {
    var b = document.getElementsByTagName('body')[0];
    b.addEventListener('click', this._onClick());

  },
  remove: function () {
    var b = document.getElementsByTagName('body')[0];
    b.removeEventListener('click', this._onClick());
  },
  _onClick: function () {
    this.clickFn = this.clickFn || this._showLog.bind(this);
    return this.clickFn;
  },
  _showLog: function (e) {
    console.log('click', this.list, e);
  }
};



// Example to test the solution

o.add();

setTimeout(function () {
  console.log('setTimeout');
  o.remove();
}, 5000);