removeEventListener is not working

Question

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

Answer 1

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

Answer 2

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

Answer 3

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!

Answer 4

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".