removing event listner in JavaScript

Question

I created a class in JavaScript which does specific task related key call (key press ) when class is initiated.

Class have a function 'receaveKey' which is referenced by addEventListener like this

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

This works for me but my class have another function "exit" When this is called i want to remove that event listener and i tried this but does work.

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

Note:- I tried this also but have problem that i cant give a reference of the initiated object of class because i also have to do some task when keys are press using 'functions' of class.

document.addEventListener("keypress",staticClassReceaveKey);

document.removeEventListener("keypress",staticClassReceaveKey);

Note:- i have tried this also

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

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

But does not find any luck as listener is not removed when using methods of class as reference function

Could you save `this.receaveKey.bind(this)` in a variable so you can remove it later? — Matt Burland, Dec 11 '15 at 16:51
Ca you be a bit more specific than "does not work"? Does the event still get picked up? Do you get an error? (also: *receive*) — Jamiec, Dec 11 '15 at 16:51
check this answer http://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working — Zoran Pandovski, Dec 11 '15 at 16:53

T.J. Crowder · Accepted Answer · 2015-12-11T17:05:38.800

You have to remove the same function you added, but bind always returns a new function.

So you'll have to remember the first one, then use it when removing:

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

Side note: The spelling is "receive."

Your requested example:

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>

Have you tried this your self i mean could you provide fiddle — Ravinder Payal, Dec 11 '15 at 16:57
@RavinderPayal: I could, but it's trivial. Yes, I've done this many times. — T.J. Crowder, Dec 11 '15 at 16:57
Yah i mistyped as i posted this question from mobile btw thanks for side note — Ravinder Payal, Dec 11 '15 at 17:00
@RavinderPayal: I've added a working example to the answer. Hope that helps! — T.J. Crowder, Dec 11 '15 at 17:05

Matt Styles · Answer 2 · 2015-12-11T16:55:57.107

3

.bind returns a new function with its context bound.

You'll need to pass it a function reference to be able to then remove it as a acallback.

var boundFn = this.receiveKey.bind( this )
element.addEventListener( 'keypress', boundFn )
element.removeEventListener( 'keypress', boundFn )

edited Dec 11 '15 at 16:55

answered Dec 11 '15 at 16:51

Matt Styles

2,442
1
18
23

This seems working , but using this only one object of class seems to be working . But i can use window["ClassKeyHandler"+classObjectSrNo] = ..........; – Ravinder Payal Dec 11 '15 at 17:04
I'm not sure I understand you. I think you'll probably need to use `this.boundFn = this.receiveKey.bind( this )`. Hard to tell without more code, and, of course, you'll want to name them in whatever way makes sense. – Matt Styles Dec 11 '15 at 17:08
1

yes this helped me thanks and +1 – Ravinder Payal Dec 12 '15 at 11:29

score 1 · Answer 3 · answered Dec 11 '15 at 16:52

1

.bind creates a new function.

You could do

this.receaveKey = function() {}.bind(this)

answered Dec 11 '15 at 16:52

Daniel A. White

187,200
47
362
445

removing event listner in JavaScript

3 Answers3

Linked