Menu
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.
912
This symptom is indicative that you've registered the same listener more than once. You must remember to deregister events when your component unloads to prevent his problem.
We can pass an object as an argument to the addEventListener method and specify that the event is only handled once. This is achieved by passing the property once to the object. If we set once to true, the event will only be fired once.
addEventListener does not overwrite existing event listeners, it simply adds a new one as the method name implies. Existing listeners must be removed using the removeEventListener method.
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);
If you call addEventListener multiple times on the same element with exactly the same values for event type, handler and capture then the handler is only registered once. From the DOM spec:
...
5. If eventTarget’s event listener list does not contain an event listener whose type is listener’s type, callback is listener’s callback, and capture is listener’s capture, then append listener to eventTarget’s event listener list.
...
154
Well,,
el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);
Registers to the same function "handle()"
el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);
Registers "function() { handle(event, myArgument)"... which are two unique anonymous functions. Thus it will fire twice.
Although I don't fully understand why you would want to register it twice, the solution would be to create a function returning your function that takes parameters.
el.addEventListener("click", crateHandle(myArgument), false);
var createHandle = function(myArgument) {
return function(event) {
.... do something
};
}
It still doesn't solve the fire twice issue though.
37
addEventListener registers as many listeners as it is used.
According to the documentation it takes 3 arguments, the third is useCapture which has nothing to do with registering listener twice or not. It is by default set to false, so adding false as a third parameter doesn't change much.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
