javascript - Javascript removeEventListener 不起作用 - 事件侦听器仍然存在

Question

我已经研究了几种解决方法，但我无法确定，我的代码是：

lb = document.body;

if(lb.addEventListener){    
    lb.addEventListener('keyup',
    function(event){
        keyPress(event.keyCode)
    }, false);
}

//In another function.

if(document.body.removeEventListener){
    document.body.removeEventListener('keyup', function(event){event.keyCode}, false);
} 

删除代码不起作用，尚未尝试大量解决方案，但它是我脚本中的最后一件事，我只想完成它。

谢谢你们

Answer 1

调用 removeEventListener 时，必须给它与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 使它更容易处理这个问题：

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

// later

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

Answer 2

您需要命名处理函数，以便稍后在删除侦听器时引用它：

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

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

Answer 3

您不能使用 removeEventListener 删除匿名函数，而是使用函数名称。例如：

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

//In another function.

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

新功能：

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

}