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

More JavaScript tasks

Back to the full DOM Manipulation cheat sheet