在使用匿名函数传递参数时，addEventListener会为同一句柄多次触发 [英] addEventListener firing multiple times for the same handle when passing in arguments with anonymous function
问题描述
由于某种原因，当将参数传递给匿名函数时，事件侦听器会为每个元素触发两次。即，元素 el 上的click事件将注册一次，因此会触发一次。
For some reason, the event listener is firing twice for each element when passing arguments into an anonymous function. I.e., the click event on element el will register once and, thus, fire once.
el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);
但如果我想将自己的参数传递给它，它会注册并触发两次。
But if I want to pass my own arguments to it, it will register and fire twice.
el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);
问题是为什么以及解决方案是什么？
The question is why and what's the solution?
我在别处寻找，似乎无法找到解决方案或理解为什么会出现这个问题。我尝试在如何实施解决方案将参数传递给addEventListener中传递的侦听器函数？但它们没有帮助 -
I looked elsewhere and cannot seem to find a solution or understand why this problem is occurring. I tried implementing the solutions in How to pass an argument to the listener function passed in addEventListener? but they did not help --
我做了基本的匿名函数或闭包然后更高级版本，如下所示但它确实有效。
I did the basic anonymous function or closure and then the more advanced version, which is the shown below but it did work.
我不明白为什么传递没有参数会导致元素事件注册一次并传递导致元素事件的参数注册两次。
I don't get why passing no arguments causes the element event to register once and passing arguments causing the element event to register twice.
以下是代码：
<html>
<head>
<script type="text/javascript">
var handle_2 = function(evt, type) {
var test;
switch (type) {
case "focus":
console.log(evt.target.value);
break;
case "click":
console.log(evt.target.id + " was clicked");
break;
default: console.log("no type found");
}
};
window.onload = function() {
var textbox = document.getElementById("t1");
var button = document.getElementById("btn");
textbox.value = "456";
button.value = "Press";
var typeFocus = "focus", typeClick = "click";
textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);
// Registers again for each element. Why?
textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);
};
</script>
</head>
<body>
<div id="wrapper">
<input id="t1" type="text" />
<input id="btn" type="button" />
</div>
</body>
</html>
任何帮助将不胜感激。谢谢。
Any help would be appreciated. Thank you.
推荐答案
最简单的解决方案是只创建一次新处理程序：
The simplest solution is to create the new handler only once:
var newHandle = function(event) { handle(event, myArgument); };
el.addEventListener("click", newHandle, false);
el.addEventListener("click", newHandle, false);
这篇关于在使用匿名函数传递参数时，addEventListener会为同一句柄多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
