使用匿名函数传入参数时，addEventListener 为同一个句柄多次触发 [英] addEventListener firing multiple times for the same handle when passing in arguments with anonymous function
问题描述
出于某种原因，在将参数传递给匿名函数时，事件侦听器会为每个元素触发两次.即，元素 el 上的点击事件将注册一次，因此触发一次.
el.addEventListener(click", handle, false);el.addEventListener(click", handle, false);但是如果我想将自己的参数传递给它，它将注册并触发两次.
el.addEventListener(click", function() { handle(event, myArgument); }, false);el.addEventListener(click", function() { handle(event, myArgument); }, false);问题是为什么以及解决方案是什么?
我查看了其他地方，但似乎无法找到解决方案或理解为什么会出现此问题.我尝试在 How to 中实施解决方案将参数传递给 addEventListener 中传递的侦听器函数? 但它们没有帮助 --
我做了基本的匿名函数或闭包，然后是更高级的版本，如下所示，但它确实有效.
我不明白为什么不传递参数会导致元素事件注册一次，而传递参数会导致元素事件注册两次.
代码如下:
<头><script type="text/javascript">var handle_2 = 函数(evt，类型){无功测试；开关(类型){案例焦点":console.log(evt.target.value);休息;案例点击":console.log(evt.target.id + 被点击");休息;默认值:console.log(未找到类型");}};window.onload = 函数(){var textbox = document.getElementById("t1");var button = document.getElementById("btn");textbox.value = "456";button.value =按"；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);//为每个元素再次注册.为什么?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);};<身体><div id="包装器"><输入id=t1"类型=文本"/><输入id=btn"；类型=按钮"/></html>
任何帮助将不胜感激.
最简单的解决方案是只创建一次新的处理程序:
var newHandle = function(event) { handle(event, myArgument);};el.addEventListener("click", newHandle, false);el.addEventListener("click", newHandle, false);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?
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.
Here is the code:
<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.
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屋！
