How to ensure an event listener is only fired once in JavaScript

1. Using the once option

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.

let btn = document.getElementById('btn');
btn.addEventListener("click", function() {

    // onClick code

}, {once : true});

2. Removing the event listener once the event is fired

We will bind an event listener for the element with the handler function and, inside the handler function, we will remove the event added for that element.

let btn = document.getElementById('btn');
function onClick(event){
   btn.removeEventListener('click', onClick);
   console.log("Event fired once, no more click will be handled");
}
btn.addEventListener('click', onClick);

The code below shows how to create a common function to handle all events and elements:

function oneTimeListener(node, type, callback) {
    // create event
    node.addEventListener(type, function listener(e) {

        // remove event listener
        e.target.removeEventListener(e.type, listener);

        // call handler with original context 
        return callback.call(this, e); 

    });
}

let btn = document.getElementById('btn');
function onClick(event){
   console.log(event, this);
}
oneTimeListener(btn, 'click', onClick);