127

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");
        });
    }
Dharman
  • 30,962
  • 25
  • 85
  • 135
Kevin Karl Leaño
  • 1,630
  • 3
  • 15
  • 20
  • 3
    you can remove it before you add it – dandavis Jan 20 '15 at 23:02
  • 9
    Wouldn't it be easier to add the listener and an additional property, like `data-listener = true`, then check if `data-litener` is set and only add the listener if not? – pawel Jan 20 '15 at 23:02
  • 1
    you can also use direct assignment to bind one-per-event handlers, ex: formFieldInput[a].onclick=function(){...}; when you replace those, the old one just goes away without complication... – dandavis Jan 20 '15 at 23:08
  • 3
    @pawel thanks. it works. i add a addition attribute on it. formFieldInput[a].setAttribute("events",true); i will do now is to check if hasAttribute("events") to do the checking :D – Kevin Karl Leaño Jan 20 '15 at 23:12
  • Not sure if it's a good practice, but I solved my issue of having duplicate events by removing the all sibling events (in my case) at the beginning of the event function. I used the off() jQuery function http://api.jquery.com/off/ – megamaiku May 17 '17 at 19:31

3 Answers3

115

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'));

Disclaimer: This solution is only works for Chrome developer tools.

Alfian Busyro
  • 2,295
  • 2
  • 17
  • 32
110

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?

Community
  • 1
  • 1
Ryan Warner
  • 1,354
  • 1
  • 10
  • 7
  • 51
    it's so weird javascript doesn't tell you that! I find this so odd. – vsync Jul 25 '15 at 20:25
  • 6
    @vsync It's not a JavaScript issue, it's a browser feature and how they manage the DOM. If Browsers were to handle such a check, it would probably be similar to what Ryan Warner said. – Sebastien Daniel Nov 08 '15 at 15:59
  • @SebastienDaniel - yeah this what I meant, the DOM.. – vsync Nov 08 '15 at 16:05
  • Simple and efficient, thanks i was stuck with anonymous function that cannot be detached, and cannot be cloned cause another event was listening on node changes... – Froggiz Sep 27 '16 at 16:31
  • @yeah flag is prefect! event duplication bind bug & h5 dataset flag solution https://codepen.io/xgqfrms/full/PaRBEy/ –  Jun 21 '18 at 09:18
91

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.

Ludovic Kuty
  • 4,868
  • 3
  • 28
  • 42
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
  • 121
    This may be true for equivalent function _references_, but not identical functions. `addEventListener(function() { alert('x'); }); addEventListener(function() { alert('x'); });` will alert `x` twice. – Charles Stover Jul 18 '18 at 17:29
  • 1
    THis was the right answer for me. I needed to know if the event was added to stop it from being added again. By making it a named function the rule above applies and the listener is not added. – Syknapse Oct 23 '19 at 08:57
  • 2
    it's important to note as @CharlesStover mentioned, the above article also states: 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 simply called repeatedly, even if in a loop. This explained the behavior I was seeing. – David B Apr 17 '20 at 11:10
  • 3
    Note: this will not work if you use .bind() on the *named* function in addEventListener – Art3mix Jun 02 '20 at 08:23
  • Same as @Charles Stover I still get event twice! – vee Mar 09 '21 at 17:25
  • 4
    @RonnieRoyston please rewrite your answer so that it warns instead of encouraging, taking note of Charles' and David's comments, because people are likely to not know about these, and probably won't read the fine print, resulting in low-quality code – ᴍᴇʜᴏᴠ Apr 21 '21 at 06:48