Event listener that is added via addEventListener is being called multiple times

javascript click event firing multiple times
addeventlistener click firing twice
removeeventlistener
javascript event firing twice
javascript remove event listener after firing
addeventlistener events
check if event listener exists
jquery change event firing multiple times

I am using addEventListener to react to certain events.

From what I read, it is possible to register multiple identical EventListeners on the same EventTarget, and the EventListener will only be called once.

Here's the quote from MDN:

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 since anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop. However, repeatedly defining the same named function in such cases can be more problematic. (see Memory issues below.)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners

I am not sure why this does not happen in this example? Running this code will call the EventListener twice: (Codepen here)

function _callback() { console.log("fnFunction"); }

function init() {
  attachGesture("panel-anchor", _callback);
  attachGesture("panel-anchor", _callback);
}

function attachGesture(sElementId, fnFunction) {
  var oElement = document.getElementById(sElementId);

  function foo() {
    console.log("Foo");
    fnFunction();
  }

  oElement.addEventListener("click", foo, false);
}

window.onload = init;

How can I make sure the EventListener is called only once?


As Quentin already mentioned and is written in the MDN documentation, the event listener functions must be identical to do what you want to achieve.

(emphasize mine)

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded.

I tried to use Function.prototype.bind to achieve this, but that returns a copy of the original function and so won't work.

I think you cannot do it without doing your own housekeeping.

"use strict";
console.clear();

function _callback() { console.log("foo fnFunction"); }
function _callback2() { console.log("bar fnFunction"); }

function init() {
  var btn = document.getElementById('btn');
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback2);
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback2);
  attachGesture(btn, 'click', _callback);
  attachGesture(btn, 'click', _callback);
}


;(function() {
  var houseKeeping = new Map();
  
  function _attachGesture(element, eventName, callback) {
    if (!houseKeeping.has([element, eventName, callback])) {
      houseKeeping.set([element, eventName, callback], true);
      element.addEventListener(eventName, callback);
    }
  }
  
  window.attachGesture = _attachGesture
})();



window.onload = init;
<button id="btn">Click</button>

Solved: addEventListener function calling multiple times, Solved: I wrote a code to perform event handling using html id selector to The problem I'm facing is the function is getting called multiple times and code firing multiple times (adding multiple listeners) in different scenarios,  Using event bubbling. Another option is to rely on event bubbling and attach the event listener on the body element.. The event is always managed by the most specific element, so you can immediately check if that’s one of the elements that should handle the event:


it is possible to register multiple identical EventListeners on the same EventTarget, and the EventListener will only be called once.

It isn't.

If you register the same event handler multiple times, then it will only be called once.

Identical but not === event handlers are not the same event handler.

You need to change your logic to avoid attempting to register identical handlers.

Lightning Component, The problem is the following: when I first open a lead and call the function, the global function is called only once. Why not add a globally scoped variable using window. addEventListener("message", function(event) { if (event.data.​source != undefined recordId; //call global funciont } }, false); window. If we attach the same event listener multiple times with jQuery's.on (), it will be attached multiple times. If we attach the same event listener multiple times with the native.addEventListener (), it will be attached only once.


Based on what I've read, since you're recreating foo inside attachGesture every time you're calling it, the above-mentioned function foo is pertaining to a different instance of itself every time. Thus, they are not the same (which violates what was mentioned in your MDN reference). Storing a reference to foo somewhere and assigning that one instead should fix the problem.

Simply put, you could try something like this

let _callback = ()=>{ console.log("fnFunction"); }
let foo = undefined;


function init() {
  attachGesture("btn_click", _callback);
  attachGesture("btn_click", _callback);
}

function attachGesture(sElementId, fnFunction) {
  var oElement = document.getElementById(sElementId);
  foo = !foo ? ()=>{console.log('foo!'); fnFunction()} : foo;
  oElement.addEventListener("click", foo);
}

window.onload = init;
<input type="button" id="btn_click" value="the button">

Event listener that is added via addEventListener is being called , it is possible to register multiple identical EventListeners on the same EventTarget, and the EventListener will only be called once. It isn't. If you register the same event handler multiple times, then it will only be called once. Identical but not === event handlers are not the same event handler. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object.


Event Listeners Firing Multiple Times -How to Impl, Event Listeners Firing Multiple Times -How to Implement? I have a form and I'm trying to track 3 selects in the form and 3 text fields, using DTM. field, the code works fine but then anytime after that when I click on any element with a listener, addEventListener('change',trackEmploymentStatusSelect);. The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target. Common targets are Element, Document, and Window, but the target may be any object that supports events (such as XMLHttpRequest).


Event Listener gets executed twice - JavaScript, My attempt is with event listeners for every element. So if On Scene Load is being called twice, that means addEventListener will add the event twice. You may want to check to see if it is added or just set via the .onclick  I could see this firing twice if your scene is loaded twice. Elements stay around even when a scene is not shown, and just reset properties hype knows about on scene load. So if On Scene Load is being called twice, that means addEventListener will add the event twice. You may want to check to see if it is added or just set via the .onclick


EventTarget.addEventListener(), If true , the listener would be automatically removed when invoked. Over time, it became clear that more options were needed. We then call addEventListener() to set up a fake event handler, Just add a getter for that option using code similar to what is shown above. Multiple identical event listeners. JavaScript event listener is simple, but requires a proper syntax. You can add multiple event listeners to the same element. You can specify whether you want event bubbling or capturing to be executed. You can easily remove the event listener with removeEventListener () method.