If you are my age, you might remember the magic of jQuery. One thing that was really handy were the $.one() event handlers, that were only executed once.

After we got rid of jQuery, for a long time, I used to solve these situations by removing the listener of an event after its first execution. (And wondering what happens if the capture flag does not match 🙄.)

And then I found out that JavaScript Event Listeners have a once option, too:

const button = document.getElementById('button');

button.addEventListener('click', () => {
  console.log('clicked!');
}, { once: true });

If the once option is se to true, the event listener gets removed automagically after its first/only execution.

Bonus: getEventListeners() function in Chrome DevTools

If an element has an event listener attached to it, is nicely shown in the DOM/Elements tab of Chromes and Firefox DevTools.

Additionally, Chrome provides a function in the DevTools Console (and only there, not for your regular JavaScript code) that lists all event listeners which are attached to an element.

getEventListeners(button) // {click: Array(1)}
button.click()
getEventListeners(button) // {}