Peter Peter - 6 months ago 46
Javascript Question

Removing duplicate event listeners

I have been trying to find a way to remove an event listener. I made a function that will add an event listener to a button but if the function runs again I want the event listener to be removed and added again. But instead it will just add another event listener and when I click on the button it will run the event listener function twice. Or even if I can just prevent it from adding a second event listener to the button would work too.

Here is the code



<button id="myId">My Button</button>



<script>



myFunction()
myFunction()

function myFunction() {
var el = document.getElementById('myId')

var listenerFn = function () {
console.log('My Message')
}

el.removeEventListener('click', listenerFn)

el.addEventListener('click', listenerFn)
}



</script>





Any tips would be most helpful.

UPDATE:

@FathiAlqadasi answer is the best so far for my issue. But I should of shown more of the code. the listener function is dynamic and can vary on what it does. Here is a another example of what I mean.

<button id="myId">My Button</button>



<script>

myFunctionA()
myFunctionA()



function myFunctionA() {
var el = document.getElementById('myId')
myFunctionB()
function myFunctionB() {
if (el.innerHTML === 'My Button') {
var listenerFn = function () {
console.log('My Message 1')
}

el.removeEventListener('click', listenerFn);

el.addEventListener('click', listenerFn);
}

else {
var listenerFn = function () {
console.log('My Message 2')
}

el.removeEventListener('click', listenerFn);

el.addEventListener('click', listenerFn);
}
}
}
</script>


UPDATE 2:

Thank you @ for the code. Here is the code in a neat codebox

<button id="myId">My Button</button>

<script>
var listenerFn;
myFunction();
myFunction()
function myFunction() {
var el = document.getElementById('myId')
el.removeEventListener('click', listenerFn);
listenerFn = function() {
console.log('My Message')
}
el.addEventListener('click', listenerFn, false);
}
</script>

Answer Source
   <button id="myId">My Button</button>



   <script>

   myFunction()
   myFunction()
   function listenerFn () {
             console.log('My Message')
        }
   function myFunction() {
        var el = document.getElementById('myId')

        el.removeEventListener('click', listenerFn)

        el.addEventListener('click', listenerFn)
   }
   </script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download