addEventListener firing multiple times for the same handle when passing in arguments with anonymous function
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. Thank you.
Answer
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);