How to remove event listener of a object with .bind(this)?

Question

Inside object constructor:

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

And when it destroys:

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

I can add event listener and works properly but I cannot remove single event listener when object destroys.

Although it is not quite related to the problem, I am using EventDispatcher.js and Class.js.

I can modify code in EventDispatcher.js to fit what I need. But how can I remove event listener of a object's function without removing all other listener?

score 11 · Answer 1 · answered Feb 23 '15 at 02:02

11

It's not being removed because it's a different object.

.bind() returns a new object every time.

You need to store it somewhere and use it to remove:

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

then

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

or

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

answered Feb 23 '15 at 02:02

zerkms

249,484
69
436
539

2

I store the handler in object attribute but I still cannot remove it successfully – tom10271 Feb 23 '15 at 02:17
@aokaddaoc: please provide some details for "I store the handler in object attribute" – zerkms Feb 23 '15 at 02:19
if i have to send paremeters using the handler, how can I? thanks – Alberto Acuña Apr 29 '16 at 08:22

Nazar Vynnytskyi · Answer 2 · 2016-11-14T09:32:58.760

Here is the way how to bind and unbind event handler in some component:

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);

How to remove event listener of a object with .bind(this)?

2 Answers2