Stack Overflow Asked by JustANewCoder on January 31, 2021
I know that for Javascript events best practice is always remove events that you are no longer use. But what about the event that is attached to a HTML DOM element that I am going to remove, should I remove the event first then remove the DOM element or I can just remove DOM element straight away and not worry about the event that is attached to it?
Example:
const mainContainerEl = document.querySelector('.main-container');
const addBtnEl = document.querySelector('.add-btn');
const removeBtnEl = document.querySelector('.remove-btn');
const outputTextContent = (e) => {
console.log(e.currentTarget.textContent);
}
addBtnEl.addEventListener('click',()=>{
/* Click to create 5 span DOM elements and add event to each
one then append each one of them to mainContainerEl */
for(let i = 1; i <= 5; i++){
const newSpanEl = document.createElement('span');
newSpanEl.textContent = i;
newSpanEl.addEventListener('click', outputTextContent);
mainContainerEl.append(newSpanEl);
};
});
/* Should I do something like this? */
removeBtnEl.addEventListener('click',()=>{
if(mainContainerEl.firstChild){
const mainContainerElChildren = [...mainContainerEl.children];
mainContainerElChildren.forEach((childEl)=>{
/* Remove event first*/
childEl.removeEventListener('click',outputTextContent);
/* After the event is removed, remove the element */
childEl.remove();
});
}
});
If I don’t remove the event first and just remove the DOM element straight away, is the event going to get removed after the DOM element is removed(will the garbage collector collects both of the event and the DOM element and released them from the memory)?
In short: in your case, for modern browsers, the event would be garbage collected as there is no more reference to the function.
But it's not guaranteed that it's safe in all cases.
Example:
const button = document.querySelector("#button");
button.onclick = () => {
const reference = 'reference';
setInterval(function () {
console.log("still here: ", reference);
}, 100);
button.remove();
};<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<button id="button">I'll delete myself</button>
</div>
<script src="src/index.js"></script>
</body>
</html>Although the node is removed and there is no reference pointing to the event handler, because of JavaScript closure, the handler's scope is still existing in the memory.
In most cases, we can simply remove the node and let garbage collection take care of the event handlers (only modern browsers though, I'm not sure about older IE browsers). But in the cases like setInterval or setTimeout in a event handler, we should manually take care of removing it to avoid a memory leak. That's why as in your question, 'for Javascript events best practice is always to remove events that you are no longer use'.
Answered by マークさん on January 31, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP