When you add an event listener in JavaScript using the addEventListener method, you can specify various options to control how that event listener behaves. One of these options is once: true. This option tells the browser to automatically remove the event listener after it has been triggered once.

In simple terms, once: true ensures that the event listener fires just once and is then automatically removed, saving you from manually removing it using removeEventListener.

Syntax

Here’s the syntax for adding an event listener with the once: true option:

element.addEventListener('event', callbackFunction, { once: true });

• element: The DOM element you’re attaching the event listener to (e.g., a button)
• ‘event’: The type of event you’re listening for (e.g., ‘click’, ‘scroll’)
• callbackFunction: The function that will be executed when the event is triggered
• { once: true }: The options object where once: true is specified.

Example

Let’s look at a simple example. Imagine you want a button click event to trigger a specific action, but only once:

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', () => {
    alert('Button clicked!');
  }, { once: true });
</script>

In this example, when the button is clicked, an alert box will appear saying, “Button clicked!”. However, because of the once: true option, the event listener will be removed immediately after the first click. Subsequent clicks on the button won’t trigger the event again.

Why bother with once: true?

• Automatic Cleanup: You don’t need to write extra code to remove the listener — it handles itself, which helps avoid memory leaks.
• Cleaner Code: No need to juggle with removeEventListener. Your code stays short and sweet.
• Better Performance: Listeners that don’t stick around when they’re not needed mean smoother, faster web pages.

const handleClick = () => {
  alert('Button clicked!');
  button.removeEventListener('click', handleClick);
};

button.addEventListener('click', handleClick);

With once: true, you can avoid this extra logic and keep your code more concise.

• Improved Performance Removing event listeners that are no longer needed helps improve the performance of your web application. By automatically removing them, once: true ensures that your code runs more efficiently, especially in cases where repeated events are unnecessary.
• Where would you use it?
  • Form Submissions: Prevent people from spamming that “Submit” button.
  • One-Time Popups: Like a welcome message that should only appear once.
  • Limited-Time Actions: Imagine a one-time discount button — clicked once, and it’s done!

Combining once with Other Options

The once: true option can be combined with other event listener options, such as capture and passive, to further control the event’s behavior. Here’s an example:

element.addEventListener('click', () => {
  console.log('Clicked');
}, { once: true, capture: true });

In this example:

• once: true ensures the event listener is removed after the first click.
• capture: true means the event is captured during the capturing phase, before it reaches the target element.

A couple of things to watch for:

• Debugging could be tricky: If an event fires and is removed after one use, it’s easy to forget why it’s not working after that!
• Be careful: Accidentally using once: true when you don’t mean to could leave your page less responsive than you planned.

Conclusion

With once: true, you can sprinkle a little more magic into your event listeners. It’s a tiny option with big benefits — cleaner code, automatic cleanup, and better performance. Just like a one-time deal, it’s gone as soon as it’s done its job! Perfect for when you only need that one event to fire and move on. Try it out, and watch your code get sleeker!

---