Question

很抱歉，如果这是一个常见问题，但我无法通过搜索找到任何似乎相关的答案。

如果我附加一个这样的事件监听器：

window.addEventListener('scroll', function() { check_pos(box); }, false);

以后尝试删除它似乎不起作用，如下所示：

window.removeEventListener('scroll', function() { check_pos(box); }, false);

我认为这是因为addEventListener和removeEventListener方法需要引用相同的函数，而我为它们提供了匿名函数，虽然它们在代码中相同但并不是字面意义上的相同。

如何更改我的代码才能调用removeEventListener？ “box”参数指的是我在屏幕上跟踪的<iframe>的名称;也就是说，我希望能够为我拥有的每个scroll订阅一次<iframe>事件（数量不同），并且一旦check_pos()函数测量某个位置，就会将调用另一个函数，并删除事件监听器以释放系统资源。

我的预感是解决方案将涉及一个闭包和/或命名匿名函数，但我不确定它看起来是什么样的，并且会欣赏一个具体的例子。

希望这是有道理的。谢谢你的帮助！

Answer 1

您是否尝试过维护对匿名函数的引用（如您所建议的那样）？

所以：

var listener = function() {
  check_pos(box);
};

window.addEventListener('scroll', listener, false);
...
window.removeEventListener('scroll', listener, false);

Mozilla的文档suggest同样如此。

Answer 2

var listener;

listener = function(){

if( window.target != anotherEvent.target )
{
    ...CODE where

    window.removeEventListener('click', listener , false);

};

window.addEventListener('click', listener ,false);

Answer 3

document.getElementById("yourId").removeEventListener("click",yourfunction1);
document.getElementById("yourId").addEventListener("click",yourfunction2);

function yourfunction1(){
//write code here
alert(1);
}

function yourfunction2(){
//write code here
alert(2);
}

<button type="button" onclick="yourfunction1()" id="yourId">Button</button>

如何使用带参数的函数添加和删除事件侦听器？

3 个答案: