The third argument to **addEventListener** accepts an **options object**: `once: true` auto-removes after first call, `capture: true` runs during capture phase (top-down), `passive: true` tells the browser you won't call preventDefault() (allows smoother scrolling). The handler receives the event object.
1Understanding Event Listeners
The third argument to addEventListener accepts an options object: once: true auto-removes after first call, capture: true runs during capture phase (top-down), passive: true tells the browser you won't call preventDefault() (allows smoother scrolling). The handler receives the event object.
Use { once: true } for one-time setup events. Use { passive: true } for scroll and touch listeners to improve scrolling performance.
const btn = document.querySelector('button');
// { once: true } - fires only once then removes itself
btn.addEventListener('click', () => {
console.log('First click only!');
}, { once: true });
// Named function for removal
function onHover(e) { e.target.style.opacity = '0.8'; }
btn.addEventListener('mouseenter', onHover);
btn.removeEventListener('mouseenter', onHover); // clean up2Practical Example
Here is a real-world application of Event Listeners showing how it is used in production JavaScript code.
// Passive scroll listener (improves FPS)
window.addEventListener('scroll', (e) => {
const scrollY = window.scrollY;
// Update scroll indicator
updateProgressBar(scrollY);
}, { passive: true }); // tells browser: no preventDefault inside3Best Practices
Follow these guidelines when working with Event Listeners:
1. Store handler references for cleanup with removeEventListener
2. Use { once: true } for one-time handlers
3. Use { passive: true } for scroll/touch for better performance
Tip: Use { once: true } for one-time setup events. Use { passive: true } for scroll and touch listeners to improve scrolling performance.
const btn = document.querySelector('button');
// { once: true } - fires only once then removes itself
btn.addEventListener('click', () => {
console.log('First click only!');
}, { once: true });
// Named function for removal
function onHover(e) { e.target.style.opacity = '0.8'; }
btn.addEventListener('mouseenter', onHover);
btn.removeEventListener('mouseenter', onHover); // clean up