Javascript removeEventListener not working - event listener remains

Question

I\'ve looked at a few ways around this, but I can\'t really tell, my code is:

lb = document.body;

if(lb.addEventListener){    
    lb.addEventListener(\'key         


        

Answer 1

When calling removeEventListener, you have to give it the same function instance than to addEventListener:

var lb = document.body;

var callback = function(event){
    keyPress(event.keyCode)
};

if(lb.addEventListener){    
    lb.addEventListener('keyup', callback, false);
}

//In another function.

if(document.body.removeEventListener){
    document.body.removeEventListener('keyup', callback, false);
}

jQuery makes it easier to deal with this, thanks to its namespaced events feature:

$(lb).on('keyup.my_namespace', function () { ... })

// later

$(lb).off('keyup.my_namespace');

Answer 2

you cant remove an anonymous function with removeEventListener, instead use the function name. e.g:

if(lb.addEventListener){    
    lb.addEventListener('keyup', myFunction, false);
}

//In another function.

if(document.body.removeEventListener){
    document.body.removeEventListener('keyup', myFunction, false);
} 

the new function:

function myFunction(e){
    var keyCode = e.keyCode;

}

Answer 3

You need to name the handler function in order to reference it later when removing the listener:

lb.addEventListener('keyup', 
function keyup(event){ // assigns the handler to "keyup"
    keyPress(event.keyCode)
}, false);

document.body.removeEventListener('keyup', keyup, false);