1

I generate objects dynamically, and when they are created, I add click event listener to them:

let elements = document.getElementsByClassName("my-class")

for (let element of elements) {
    element.addEventListener('click', function() {
        // here I do my job
    }, false)
}

After that, some objects may be deleted by the user. I take them off with this method:

element.remove()

And now I want to understand what happens next:

  • Does this listener still exist? I hope that listeners became 1 less. But how to check it?
  • Do I really need to worry about the large number of listeners? how large a number of listeners can become a problem? I'm afraid my app will break.
Tamila Ambeon
  • 7
  • 3
  • The element is removed, so is the event listener. – mykaf May 12 '23 at 18:40
  • Does this answer your question? [Do I need to remove event listeners before removing elements?](https://stackoverflow.com/questions/6033821/do-i-need-to-remove-event-listeners-before-removing-elements) – Konrad May 12 '23 at 18:46
  • When you remove an element with element.remove(), the event listener that was added to it using element.addEventListener() is automatically removed as well. So you don't have to worry about it still existing and causing any issues. – Emin Abdullayev May 12 '23 at 18:47

3 Answers3

1

You can check this question’s answer

If a DOM Element is removed, are its listeners also removed from memory?

Event Listener will be collected by garbage collector algorithm with the removed node if no reference to it

Arsany Benyamine
  • 76
  • 6
0

Yes, the listener still exists. In Chrome and FF devtools, there is a function called getEventListener(node). Experiment with it, and notice that even after your call el.remove(), there are still event listeners attached to that element.
browser console

This means that if we remove an element and add the same element to anywhere in our HTML, the event listener still works:

const c = document.getElementById("c")

c.addEventListener("click", () => alert("clicked"))

setTimeout(() => c.remove(), 1000)
setTimeout(() => document.body.appendChild(c), 2000)
<button id="c">click</button>

But is this necessarily a problem? No, not really. The browser optimizes your code and, as mentioned in this post, that isn't something that should bother you. Your concern for overloading events, as well, should not be an issue; browsers have been optimized for decades; your events are stored in a list of listeners for a specific event that is only looked up when the user fires the event.

The only way I envision a problem is if you leave everything dangling and don't clean it up with scope. Take this example:

const length = 1_000_000
const elements = Array.from({ length }, () => {
  const el = document.createElement("button")
  el.addEventListener("click", () => alert("do something..."))
})

elements.forEach(el => el.remove()) // <-- this does NOT free up our listener functions, however

As mentioned, we can use scope to automatically discard our values or explicitly call el.removeEventListener (but you'll need a reference to that function).

code
  • 5,690
  • 4
  • 17
  • 39
-1

  • No, If you remove element from DOM then its associated event listeners is also removed as well.

  • If you want to remove event listener without removing element use

element.removeEventListener(type,()=>{ 
    console.log("Event Removed")
)}
pushkraj_8
  • 1
  • 1
  • This would not remove any event listener. The method takes the reference of the function to be removed, thus supplying a new function gives it a new reference and not one that was already attached. See [removeEventListener on anonymous functions in JavaScript](https://stackoverflow.com/q/4950115) and [How can I remove a JavaScript event listener?](https://stackoverflow.com/q/4402287) – VLAZ May 13 '23 at 07:00