Advertisement
In JavaScript, you need to be mindful of removing event listeners to avoid memory leaks — especially in long-lived apps like single-page applications (SPAs) or when working with frameworks/libraries. Eventhough JavaScript has automatic garbage collection, memory leaks can still happen if:
1. A DOM element is removed, but a listener still references it.
2. A callback (event listener) holds a reference to a large object or closure that can't be cleaned up.
3. Global objects like window, document etc retain listeners indefinitely unless manually removed.
So if you add any event listeners to DOM element, it is a good practice to remove it after its usage as shown below,
1const button = document.getElementById("btn");
2
3function handleClick() {
4 console.log("Clicked!");
5}
6
7button.addEventListener("click", handleClick);
8
9// Always remove when done
10
11button.removeEventListener("click", handleClick);<!-- QUESTIONS_END -->
### Coding Exercise
Advertisement
JavaScript Coding Exercise 48
Test your knowledge with this interactive coding challenge.
Start CodingAdvertisement