JavaScript removeEventListener won't work

Question

I have a simple drag / drop script that I am playing around with to learn.. to try the code, just have an element with id "TEST" on a page and place the script on the page.

The element will begin dragging, and when you mouse up it seems like the removeEventListener doesn't seem to be working. I've been messing with it for 2 hours please help! Is there any obvious reason that it is not working? here is the script:

var Example = function()  {
var exa = this;
this.elem = null;

    this.init = function() {
        exa.elem = document.getElementById('TEST');
        console.log('exa.init()');
        exa.attachEvent(exa.elem, 'mousedown',  function(event) {
            console.log('mousedown');
            exa.drag.anchor(event);
        });

    }
    this.attachEvent = function ( object, event, handler )  {
            if (window.attachEvent) {
                    object.attachEvent( 'on'+event, function() {
                    handler.apply(object, arguments);
                }, false );
            } else {
                object.addEventListener( event, function() {
                handler.apply(object, arguments);
                }, false );
            }
        }
      this.detachEvent = function( object, event, handler ){
            if (window.detachEvent) {
                object.detachEvent( 'on'+event, function(){
                    handler.apply(object, arguments);
                }, false ) ;
            } else {
                    object.removeEventListener( event, function() {
                        handler.apply(object, arguments);
                    }, false );
            }
        }

    this.drag = {
        'release' : function(event) {
            exa.elem.removeEventListener('mousemove', function(event) { exa.drag.move(event) }, true);
            console.log('drag.release2');
        },
        'anchor' : function(event){
            console.log('exa.drag.anchor();');
            offY= event.clientY-parseInt(exa.elem.offsetTop);
            offX= event.clientX-parseInt(exa.elem.offsetLeft);
            exa.attachEvent(window, 'mousemove', function(event) {
                    exa.drag.move(event);
            });
        },
        'move' : function(event) {
            exa.elem.style.position = 'absolute';
            var topPosition = (event.clientY-offY);
            var leftPosition = (event.clientX-offX);
            exa.elem.style.top =  topPosition+ 'px';
            exa.elem.style.left =  leftPosition + 'px';
            //console.log('FROM THE TOP: ' + topPosition);
            //console.log('FROM THE LEFT: ' + leftPosition);
            exa.attachEvent(window, 'mouseup', function(event) {
                    exa.drag.release(event);
            });
        }
    }

}


var example = new Example();
example.attachEvent(window, 'load', function(event) {
  example.init(event);
});

---

Sorry about that, the code I posted had confusing names for the functions and a couple mistakes, please look at the following:

var Example = function()  {
var exa = this;
this.elem = null;

    this.init = function() {
        exa.elem = document.getElementById('TEST');
        console.log('exa.init()');
        exa.newEvent(exa.elem, 'mousedown',  function(event) {
            console.log('mousedown');
            exa.drag.anchor(event);
        });

    }
    this.newEvent = function ( object, event, handler )  {
            if (window.attachEvent) {
                    object.attachEvent( 'on'+event, function() {
                    handler.apply(object, arguments);
                }, false );
            } else {
                object.addEventListener( event, function() {
                handler.apply(object, arguments);
                }, false );
            }
        }
      this.removeEvent = function( object, event, handler ){
            if (window.detachEvent) {
                object.detachEvent( 'on'+event, function(){
                    handler.apply(object, arguments);
                }, false ) ;
            } else {
                    object.removeEventListener( event, function() {
                        handler.apply(object, arguments);
                    }, false );
            }
        }


    this.drag = {
        'release' : function(event) {
            exa.removeEvent(exa.elem, 'mousemove', exa.drag.move);
            console.log('drag.release2');
        },
        'anchor' : function(event){
            console.log('exa.drag.anchor();');
            offY= event.clientY-parseInt(exa.elem.offsetTop);
            offX= event.clientX-parseInt(exa.elem.offsetLeft);
            exa.newEvent(window, 'mousemove', function(event) {
                    exa.drag.move(event);
            });
        },
        'move' : function(event) {
            exa.elem.style.position = 'absolute';
            var topPosition = (event.clientY-offY);
            var leftPosition = (event.clientX-offX);
            exa.elem.style.top =  topPosition+ 'px';
            exa.elem.style.left =  leftPosition + 'px';
            exa.newEvent(window, 'mouseup', function(event) {
                    exa.drag.release(event);
            });
        }
    }

}


var example = new Example();
example.newEvent(window, 'load', function(event) {
  example.init(event);
});

Answer 1

You need a variable that refers to first function (callback passed to addEventListener), each time when you passing function with body as argument to removeEventListener, new function is created

var callback = function()
{
    alert(1);
}

button.addEventListener('click', callback);
button.removeEventListener('click', callback);