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

删除代码无法正常工作，尚未尝试过大量解决方案，但这是我的脚本中的最后一件事，我只想完成它。

谢谢大家。

- Josh Dredge

---

你不需要使用 false 参数。 - karthikr

2个问题：1.你应该删除相同的函数（引用它），而不是另一个看起来相同的函数; 2. addEvenListener和removeEventlistener必须附加到相同的对象。我刚刚发现，“document.addEventListener”无法使用“window.removeEventListener”删除。 - anneb

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

- Arnaud Le Blanc

Answer 2

你不能使用removeEventListener移除匿名函数，而是应该使用函数名。例如：

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;

}

- Shlomi Komemi

Answer 3

为了在之后删除监听器时能够引用它，您需要给处理函数命名：

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

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

- David Hellsing