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

Question

抱歉，如果这是一个常见问题，但我在搜索中找不到任何看起来相关的答案。

如果我像这样附加事件监听器：

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

尝试稍后将其删除似乎不起作用，像这样：

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

我认为这是因为addEventListener和removeEventListener方法需要引用相同的函数，而我提供的是匿名函数，虽然代码相同，但它们不是完全相同的。 我该如何修改代码才能让调用removeEventListener函数起作用？“box”参数是一个我正在跟踪屏幕上的

- Bungle

Answer 1

你尝试过保留对匿名函数的引用吗（像你建议的那样）？

因此：

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

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

根据 Mozilla 的文档建议，做相同的事情。

- Vivin Paliath

---

谢谢，Vivin - 如果我错了，请纠正我，但我认为这不允许我设置具有不同“box”值的多个事件侦听器，这正是我需要做的。参数“box”不是全局变量。例如，仅使用文字值，我可能会调用window.addEventListener('scroll', function() { do_something('string1'); }, false);，稍后window.removeEventListener('scroll', function() { do_something('string1'); }, false);，然后window.addEventListener('scroll', function() { do_something('string2'); }, false);等等。 - Bungle

有一种方法可以使用闭包来添加多个事件监听器（请参见https://dev59.com/ikzSa4cB1Zd3GeqPiwXr#2277000）。但是，如果您想进行一些严肃的事件处理，我建议使用jQuery。它会让事情变得更加容易。 - Vivin Paliath

如果使用 < window.removeEventListener('scroll', listener, false); > 将其移除，然后再使用 < "listener" in window" > 进行检查，仍然会返回 "true"。有什么帮助吗？ - Ambuj Khanna

Answer 2

var listener;

listener = function(){

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

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

};

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

- Rodrigo

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>

- Bala visakh