Javascript 如何使用带参数的函数添加和删除事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2991382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add and remove an event listener using a function with parameters?
提问by Bungle
Sorry if this is a common question, but I couldn't find any answers that seemed pertinent through searching.
抱歉，如果这是一个常见问题，但我无法通过搜索找到任何似乎相关的答案。
If I attach an event listener like this:
如果我附加这样的事件侦听器：
window.addEventListener('scroll', function() { check_pos(box); }, false);
it doesn't seem to work to try to remove it later, like this:
稍后尝试将其删除似乎不起作用，如下所示：
window.removeEventListener('scroll', function() { check_pos(box); }, false);
I assume this is because the addEventListenerand removeEventListenermethods want a reference to the same function, while I've provided them with anonymous functions, which, while identical in code, are not literally the same.
我认为这是因为addEventListener和removeEventListener方法想要引用相同的函数，而我为它们提供了匿名函数，虽然代码相同，但实际上并不相同。
How can I change my code to get the call to removeEventListenerto work? The "box" argument refers to the name of an <iframe>that I'm tracking on the screen; that is, I want to be able to subscribe to the scrollevent once for each <iframe>that I have (the quantity varies), and once the check_pos()function measures a certain position, it will call another function and also remove the event listener to free up system resources.
如何更改我的代码以使调用removeEventListener正常工作？“box”参数指的<iframe>是我在屏幕上跟踪的名称；也就是说，我希望能够为我拥有的scroll每个事件订阅一次<iframe>（数量不同），一旦该check_pos()函数测量到某个位置，它将调用另一个函数并删除事件侦听器以释放系统资源.
My hunch is that the solution will involve a closure and/or naming the anonymous function, but I'm not sure exactly what that looks like, and would appreciate a concrete example.
我的预感是该解决方案将涉及一个闭包和/或命名匿名函数，但我不确定它到底是什么样子，并且希望有一个具体的例子。
Hope that makes sense.
希望这是有道理的。
回答by Vivin Paliath
Have you tried maintaining a reference to the anonymous function (like you suggested)?
您是否尝试过维护对匿名函数的引用（如您所建议的）？
So:
所以：
var listener = function() {
check_pos(box);
};
window.addEventListener('scroll', listener, false);
...
window.removeEventListener('scroll', listener, false);
Mozilla's docs suggestthe same thing.
Mozilla 的文档也提出了同样的问题。
回答by Rodrigo
var listener;
listener = function(){
if( window.target != anotherEvent.target )
{
...CODE where
window.removeEventListener('click', listener , false);
};
window.addEventListener('click', listener ,false);
回答by Bala visakh
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>