Check if an element has event listener on it. No jQuery [duplicate]
How to check if an element has event listener on it, if I use an inline function on it like the code below? Because I have a function that recalls the function and add the event listener, but it cause to have duplication event listener causing it to trigger a function twice. How can I check it so I can prevent it to add an event listener if is it already exist?
for (var a = 0;a<formFieldInput.length;a++) {
if(formFieldInput[a].hasAttribute("name") && formFieldInput[a].attributes.title.value !== "Valid Until") {
formFieldInput[a].addEventListener("click",function(event) {
toggleFieldList(event,"show");
});
}
There is no JavaScript function to achieve this. However, you could set a boolean value to true
when you add the listener, and false
when you remove it. Then check against this boolean before potentially adding a duplicate event listener.
Possible duplicate: How to check whether dynamically attached event listener exists or not?
Since 2016 in Chrome Dev Tools console, you can quickly execute this function below to show all event listeners that have been attached to an element.
getEventListeners(document.querySelector('your-element-selector'));
Caution: This solution is only works for Chrome developer tools.
You don't need to. Just slap it on there as many times as you want and as often as you want. MDN explains identical event listeners:
If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the
removeEventListener
method.Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code called repeatedly, even if in a loop.