9

I don't know what I am doing wrong but here is an example of what I am doing and it doesn't seem to work.

someDom.addEventListener('mousemove',function(ev) {self.onInputMove(ev)},false);

someDom.removeEventListener('mousemove',self.onInputMove);

The removeEventListener code is executed but it just doesn't remove the 'mousemove' listener

David
  • 208,112
  • 36
  • 198
  • 279
fogy
  • 179
  • 1
  • 2
  • 4

4 Answers4

27

removeEventListener removes the listener that exactly matches the function that was added.

In this case, the function that addEventListener added was:

var some_func = function(ev) {
    self.onInputMove(ev);
};

Store a reference to the actual function and you'll be good. So for example, the following should work:

someDom.addEventListener('mousemove',self.onInputMove,false);

someDom.removeEventListener('mousemove',self.onInputMove,false);
Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 4
    The third argument to removeEventListener is also mandatory so your exmple should be: `someDom.removeEventListener('mousemove', self.onInputMove, false);` – meouw Apr 28 '11 at 22:29
  • 1
    I know I'm several years late, but the third argument isn't actually mandatory right? I think it's supposed to be optional, and it should default to false. – Michael Martin-Smucker Dec 02 '16 at 18:13
  • It was once upon a time, but it is no longer mandatory. I'll leave it in there just for clarity, but good point. – Sean Vieira Dec 04 '16 at 13:21
  • please explain about third parameter in `removeEventListener`? and I need to use `true` as third parameter in `addEventListener` so I could prevent default mouse clicks... (opening link), so I can't set `false` to this method.. – user924 Nov 11 '17 at 19:45
  • If you use `true` for both `add` and `removeEventListener` it will work - the underlying issue is that the function which is added must be the exact same function as the function being removed. – Sean Vieira Nov 12 '17 at 01:06
6

onInputMove is not an event-callback method. So you need to do something like:

var event = function(ev) {self.onInputMove(ev)};
someDom.addEventListener('mousemove', event,false);

someDom.removeEventListener('mousemove', event, false);
cem
  • 1,911
  • 12
  • 16
  • The third argument to removeEventListener is also mandatory so your exmple should be: `someDom.removeEventListener('mousemove', event, false);` – meouw Apr 28 '11 at 22:28
  • 4
    `event` isn't a good name for your eventhandler function reference – UpTheCreek Nov 29 '12 at 11:57
1

Why make it yourself so hard, just use the following to bind an event to an element:

element.onmousemove = function(e) {
    // Some code here...
    alert("Mouse moved!");
};

Now, when you want to remove the event, just do this:

element.onmousemove = null;

Done!

Hope this helps you guys out!

Steffen Brem
  • 1,738
  • 18
  • 29
  • This should have been marked as the answer. Good day to you kind sir. You just saved me. – thandasoru Feb 26 '13 at 03:30
  • 11
    @thandasoru not if you are using event listeners. – Sir Nov 04 '13 at 01:59
  • 2
    Because this uses the old event handlers as properties paradigm, rather than the DOM Level 2 event standard. And, because this technique doesn't allow for multiple handlers to a single event. – Scott Marcus Mar 11 '16 at 19:29
  • 1
    Also, it doesn’t allow you to specify capture or bubble, or other options. – Manngo Jul 22 '16 at 02:10
1

This page comes first on searching this/such issue on Google. So apart from answers already mentioned, here is one more interesting fact for future:

Leaving out the third optional variable in addEventListener() for useCapture/useBubble (as it defaults to false) does create some issue while removing the same eventlistener with same callback name. I faced this issue while working on chrome. Cant say about other browsers.

So do mention the third variable explicitly as "false".

daksh_019
  • 802
  • 7
  • 16