once and passive options
Learn to run a listener once and gain performance with passive.
The once option
If you want a listener to run only once, use the once: true option. After the first trigger, the browser removes the listener automatically; it does not fire again.
button.addEventListener('click', handleClick, { once: true });This option is useful when you want to start an action once on the first click. No manual removeEventListener call is needed.
The passive option
The passive: true option tells the browser that the listener will not call preventDefault inside. This way the browser can start scrolling immediately without waiting for the listener. This improves performance especially for events like scroll and touchmove.
box.addEventListener('scroll', handleScroll, { passive: true });If you still call preventDefault in a passive: true listener, the browser prints a warning and the call is ignored.
Exercise Add a once: true listener for button
Define a button variable and select the #button element. Add a click listener and pass { once: true } as the third parameter.
Show example solution
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('clicked');
}, { once: true });Test yourself
-
What does the once: true option do?
button.addEventListener('click', () => { console.log('clicked'); }, { once: true });- Disables the listener
- The listener runs only once
- The listener runs twice
- Removes the listener immediately
Show answer
The listener runs only once — Correct! once: true limits the listener to a single run.
-
Add the single-run option
button.addEventListener('click', handleClick, {____: true });Show answer
button.addEventListener('click', handleClick, {once: true }); -
Match options to their effects
- once: true
- Runs only once
- passive: true
- preventDefault is ignored
- { }
- Listener options