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

【问题标题】：How do I add and remove an event listener using a function with parameters?如何使用带参数的函数添加和删除事件侦听器？
【发布时间】：2011-02-28 19:14:16
【问题描述】：

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

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

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

稍后尝试将其删除似乎不起作用，如下所示：

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

我认为这是因为 addEventListener 和 removeEventListener 方法想要引用相同的函数，而我为它们提供了匿名函数，虽然代码相同，但实际上并不相同。

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

我的预感是该解决方案将涉及一个闭包和/或命名匿名函数，但我不确定具体是什么样的，希望能举个具体的例子。

希望这是有道理的。

【问题讨论】：

标签： javascript events event-handling addeventlistener dom-events

【解决方案1】：

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

所以：

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

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

Mozilla 的文档suggest 也是一样。

【讨论】：

谢谢，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);，等等。
有一种方法可以通过使用闭包来添加多个事件监听器（参见stackoverflow.com/questions/2276961/…）。但是，如果您想做一些严肃的事件处理，我建议您使用 jQuery。它使事情变得容易得多。
如果使用并使用再次检查，所以它仍然返回“true”。有什么帮助吗？

【解决方案2】：

var listener;

listener = function(){

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

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

};

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

【讨论】：

【解决方案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);
}

&lt;button type="button" onclick="yourfunction1()" id="yourId"&gt;Button&lt;/button&gt;

【讨论】：