When we remove an element using Htmlselectelement.remove() are the events assigned to the element removed as well?

Asked

Viewed 63 times

0

When we remove an element using HTMLSelectElement.remove() events assigned to it are deleted completely as well?

MDN - remove W3schools - remove

Should I use the removeEventListener before removing the element?

Example:

let sel = document.getElementById("existingList");

function fc_click () {

  console.log ('Clique')

}

sel.addEventListener ('click', fc_click);

console.log (sel.click);

sel.remove();

// TENTA RESGATAR O ELEMENTO NOVAMENTE
sel = document.getElementById("existingList");

console.log (sel.click);
<select id="existingList" name="existingList">
  <option value="1">Option: Value 1</option>
  <option value="2">Option: Value 2</option>
  <option value="3">Option: Value 3</option>
</select>

javascript html
  • 2

    The function remove does not delete the element, it just removes it from the node to which the element is attached. For example, if you keep a reference to the element, you can attach it to another node it will accompany the event. On the other hand, if you are not going to use the element elsewhere, you should only remove the event if you do not want it to be triggered and only very specific events are triggered when the element is not attached to the DOM (onload, onabort, onerror, etc.)in the other, the Garbage Collector is in charge of deleting the element and the events associated with it.

  • @v.Santos right, then the attached element will be removed as there will no longer be any reference to it in my scripts, thus the type events click will be removed without using removeEventListener, correct? If I don’t have to use removeEventListener before deleting the same... question and trying to gain memory even being a small part.

1 answer

0


The problem of events added by addEventListener() is that it has never been very clear where and how they are stored. There is a discussion about this and the fact that it is not possible to access all the events attached to an element always seemed to me something problematic. In this regard, I recommend the great discussion on stack overflow in English:

get-Event-listeners-Attached-to-Node-using-addeventlistener

whereas, as far as your question is concerned, in general, I stand by what I said in the comment, that is, the removal of objects from memory is the responsibility of the Garbage Collector, and for that reason it is only necessary to remove the event if there is a possibility of it being fired and you do not want that to happen. Thus, in events like 'click', the removal seems unnecessary.

However, in specific circumstances, especially if you need to create and remove a very large number of elements with events associated with it, it may be important to remove the event before the element is removed. I say this based on the following example: 

/*<< AVISO: ESSE SCRIPT FOI CRIADO UNICAMENTE PARA A REALIZAÇÃO DE UM TESTE. 
ESSE SCRIPT GASTA UMA QUANTIDADE MASSIVA DE MEMÓRIA RAM E PODE TRAVAR O NAVEGADOR  >> */

function teste(){
    for(let i = 0; i < 100000; i++){
        const callback = () => alert("Hi!");
        const div = document.createElement("div");
        document.body.appendChild(div);
        div.addEventListener('click', callback);
        //div.removeEventListener(click, callback);
        div.remove();
    }
}
setInterval(teste, 100);

In the above script, the function teste() creates an element, attached to the DOM, associates it to an event and then removes the created element from the DOM. That’s a million times per second. When the excerpt div.removeEventListener(click, callback); is not running occurs memory leak. Actually, running on the main browsers, the script took less than 20 seconds to wipe out the 8GB RAM of my computer.

On the other hand, executed the removal of the event, that is, taking out the two comment bars of div.removeEventListener(click, callback); there was no memory leak. Therefore, in similar circumstances, we highly recommend removing the event.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.