Event Listeners in JavaScript
From the DOM Manipulation cheat sheet · Events - Basics · verified Jul 2026
Event Listeners
Attach and remove event handlers to respond to user interactions
javascript
// Add event listener
element.addEventListener('click', handleClick)
// With options
element.addEventListener('scroll', handleScroll, {
passive: true,
once: true
})
// Remove event listener
element.removeEventListener('click', handleClick)
// Event handler function
function handleClick(event) {
console.log('Clicked!', event.target)
}💡 Named functions can be removed, anonymous cannot
⚡ Use passive: true for scroll/touch events
📌 Arrow functions don't have their own "this"
✅ Use AbortController for multiple listener cleanup
Continue with DOM Manipulation
Save the full cheat sheet or work through every related task.