ReviseAlgo Logo

DOM Manipulation

Event Listeners

Master event handling in JavaScript. Learn to register events with addEventListener, clean up with removeEventListener, and use options like once and passive.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

Webpages interact with users by responding to events (like clicks, keypresses, scrolls, or form submissions). JavaScript manages this interaction using Event Listeners, which register callback functions to run when specific events occur.

2. Why It Matters

Failing to remove event listeners when elements are destroyed is one of the most common causes of memory leaks in frontend applications. Understanding how to manage listeners prevents memory leaks and ensures event handling is performant.

3. Real-World Analogy

Think of a Doorbell Subscription System:

  • addEventListener: You hire a receptionist and instruct them: "Every time the doorbell rings (the event), welcome the visitor (the callback handler)." The receptionist sits at the desk waiting for the event.
  • removeEventListener: The receptionist's shift ends. You must explicitly dismiss them (remove listener) so they stop waiting. If you forget to dismiss them, they remain at the desk indefinitely, consuming resources (causing a memory leak).

4. Registering and Removing Listeners

Event listeners are managed using two matching methods:

1. addEventListener(type, listener, options):

Registers an event handler function on the target element. Options include:
• once: true: Automatically removes the listener after it fires once.
• passive: true: Tells the browser that the listener will not call preventDefault(), allowing the browser to optimize scroll performance.

2. removeEventListener(type, listener, options):

Removes an event listener from the target element. To remove a listener, the parameters (event type, function reference, and options) must match the registered listener exactly.

5. Practical Example

This script demonstrates registering a button click listener that fires only once, cleaning itself up automatically:

6. Common Mistakes

  • Trying to remove anonymous function listeners: You cannot remove event listeners that were registered using inline anonymous functions or arrow functions, because you don't have a reference to the function. Always use a named function reference if you need to remove the listener later.

7. Quick Quiz

Q1: Which event listener option should you use to optimize scroll performance on touch screens?

A) once: true

B) passive: true

Answer: B — The passive option tells the browser that the listener will not call preventDefault(), which allows the browser to scroll the page smoothly without waiting for the JavaScript code to run.

8. Scenario-Based Challenge

The Cleanup Lifecycle Manager:

You write a custom video player. While the video is playing, it listens to window resize events to recalculate video dimensions. When the player is closed or destroyed, remove the resize event listener to prevent memory leaks. Write the initialization and teardown functions.

9. Debugging Exercise

Explain why this attempt to remove the event listener fails:

const input = document.getElementById('username');

input.addEventListener('input', function(e) {
  console.log('Value changes:', e.target.value);
});


// Detach handler
input.removeEventListener('input', function(e) {
  console.log('Value changes:', e.target.value);
}); // fails to remove! Why?
View Solution

Diagnosis: The function passed to removeEventListener is a new function instance in memory, even if its code is identical to the registered function. Since the function references do not match, the listener is not removed.

Fix: Store the callback function reference in a variable, and pass that variable to both methods:

const onInput = e => console.log(e.target.value);


input.addEventListener('input', onInput);
input.removeEventListener('input', onInput); // works!

10. Interview Questions

🟢 Q1: Why is it important to remove event listeners, and how do you do it safely?

Answer:
• Why: If an element is removed from the DOM but still has active event listeners referencing it, the garbage collector cannot reclaim its memory. This leads to memory leaks and causes performance to degrade over time.
• How: Save a reference to the callback function in a variable, and call removeEventListener with the exact same parameters (event type, function reference, and options) when the element is destroyed.

11. Production Considerations

  • • React Cleanup: In React, always return a cleanup function from your useEffect hooks to remove any global event listeners (like scroll or resize listeners) that were attached when the component mounted, preventing memory leaks when the component unmounts.