Event Listeners Not Removed, Causing Memory Leaks – A Detailed Guide

Introduction

Memory leaks occur in JavaScript when objects that are no longer needed are still retained in memory, preventing the browser’s garbage collector from freeing up resources. One major cause of memory leaks is not properly removing event listeners.

In this guide, we will cover:

• What happens when event listeners are not removed?
• How event listeners cause memory leaks?
• Common scenarios leading to this issue
• Best practices to prevent memory leaks
• Efficient ways to manage event listeners

---

Step 1: Understanding How JavaScript Handles Event Listeners

JavaScript uses event listeners to respond to user interactions such as clicks, keyboard input, or mouse movements.

A typical event listener:

document.getElementById("myButton").addEventListener("click", function () {
    console.log("Button clicked!");
});

When this event listener is attached to an element, it stays in memory until the page is refreshed or the element is explicitly removed.

If event listeners are not removed, they may keep unnecessary objects in memory, leading to performance issues.

---

Step 2: Why Not Removing Event Listeners Causes Memory Leaks

When an event listener is attached to an element:

1. The element itself is retained in memory as long as the listener exists.
2. Any variables or objects inside the event handler are also kept in memory.
3. If the element is removed from the DOM but the event listener is not removed, JavaScript still holds a reference to it.

📌 Example of Memory Leak

document.getElementById("addListener").addEventListener("click", function () {
    let button = document.createElement("button");
    button.innerText = "Click Me";
    document.body.appendChild(button);

    button.addEventListener("click", function () {
        console.log("New button clicked!");
    });

    // Removing the button does not remove its event listener!
    document.body.removeChild(button);
});

🛑 Problem:

• Every time the “addListener” button is clicked, a new button is created.
• The event listener on the new button remains in memory, even if the button is removed from the DOM.
• Over time, these detached elements cause a memory leak.

---

Step 3: Common Causes of Memory Leaks Due to Event Listeners

1️⃣ Not Removing Event Listeners Before Removing Elements

When elements are removed from the DOM without detaching their event listeners, they are still referenced in memory.

❌ Bad Code (Causes Memory Leak)

let div = document.createElement("div");
document.body.appendChild(div);

div.addEventListener("click", function () {
    console.log("Div clicked!");
});

document.body.removeChild(div); // ❌ Event listener still exists in memory!

✅ Solution: Remove the Event Listener Before Deleting the Element

div.removeEventListener("click", function () {
    console.log("Div clicked!");
}); // ✅ Event listener removed

document.body.removeChild(div); // ✅ Now safe to remove

🛑 Warning:
This won’t work as expected because anonymous functions cannot be referenced later. Instead, use named functions.

✅ Correct Fix (Using Named Functions)

function handleClick() {
    console.log("Div clicked!");
}

div.addEventListener("click", handleClick);
div.removeEventListener("click", handleClick); // ✅ Correct way to remove
document.body.removeChild(div);

---

2️⃣ Attaching Event Listeners Inside Loops Without Removing Them

When event listeners are attached repeatedly in a loop without removing the previous ones, multiple instances of the event listener pile up.

❌ Bad Code (Creates Multiple Event Listeners)

for (let i = 0; i < 5; i++) {
    document.getElementById("btn").addEventListener("click", function () {
        console.log("Button clicked!");
    });
}

✅ Solution: Remove Existing Listeners Before Adding New Ones

function handleClick() {
    console.log("Button clicked!");
}

let btn = document.getElementById("btn");
btn.removeEventListener("click", handleClick); // ✅ Remove before adding
btn.addEventListener("click", handleClick);

---

3️⃣ Event Listeners Attached to Window or Document Objects

Global event listeners on window or document persist even after navigating between pages in single-page applications (SPAs).

❌ Bad Code (Creates Persistent Event Listeners)

window.addEventListener("scroll", function () {
    console.log("Scrolling...");
});

✅ Solution: Remove the Event Listener When No Longer Needed

function handleScroll() {
    console.log("Scrolling...");
}

window.addEventListener("scroll", handleScroll);
window.removeEventListener("scroll", handleScroll); // ✅ Clean up

---

4️⃣ Event Listeners in Set Intervals or Timeouts

If event listeners are used inside setInterval or setTimeout without proper cleanup, they keep piling up.

❌ Bad Code (Event Listeners Keep Accumulating)

setInterval(function () {
    document.addEventListener("click", function () {
        console.log("Clicked!");
    });
}, 1000);

✅ Solution: Remove Old Event Listeners Before Adding New Ones

function handleClick() {
    console.log("Clicked!");
}

setInterval(function () {
    document.removeEventListener("click", handleClick);
    document.addEventListener("click", handleClick); // ✅ Only one listener
}, 1000);

---

Step 4: Best Practices to Prevent Memory Leaks

✅ 1. Always Use Named Functions Instead of Anonymous Functions

• Anonymous functions cannot be removed using removeEventListener.
• Always store event listeners in a variable.

✔ Correct Way

function handleClick() {
    console.log("Clicked!");
}

document.getElementById("btn").addEventListener("click", handleClick);
document.getElementById("btn").removeEventListener("click", handleClick);

---

✅ 2. Remove Event Listeners When Elements Are Removed

✔ Before removing an element, first detach event listeners:

function handleClick() {
    console.log("Div clicked!");
}

let div = document.createElement("div");
div.addEventListener("click", handleClick);
document.body.appendChild(div);

// Remove event listener before deleting element
div.removeEventListener("click", handleClick);
document.body.removeChild(div);

---

✅ 3. Use once: true for One-Time Event Listeners

• If an event should run only once, set { once: true }.

✔ Example

document.getElementById("btn").addEventListener("click", function () {
    console.log("Clicked!");
}, { once: true });

---

✅ 4. Clean Up Event Listeners in Single Page Applications (SPAs)

• In React, Angular, Vue, etc., use cleanup functions to remove event listeners.

✔ React Example

useEffect(() => {
    function handleResize() {
        console.log("Resized!");
    }
    
    window.addEventListener("resize", handleResize);
    
    return () => {
        window.removeEventListener("resize", handleResize); // ✅ Clean up on unmount
    };
}, []);

---

Final Thoughts

🔥 Key Takeaways

✅ Not removing event listeners can cause memory leaks and slow down performance.
✅ Always remove event listeners before removing elements.
✅ Use named functions so that they can be removed properly.
✅ Use { once: true } if an event should only trigger once.
✅ Clean up event listeners in SPAs using lifecycle hooks.

Would you like examples in different frameworks like React, Angular, or Vue?