DOM 요소가 삭제되면, listener도 메모리에서 지워지나요 ?

[yechoi42]

레퍼런스가 없는 DOM 요소가 지워지면, 그렇습니다. 가비지 컬렉터가 요소뿐만 아니라 연결된 핸들러와 리스너를 수거해갑니다.

var a = document.createElement('div');
var b = document.createElement('p');
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b);
b = null; 
// A reference to 'b' no longer exists 
// Therefore the element and any event listeners attached to it are removed.

그러나, 레퍼런스가 여전히 그 요소를 가리키고 있다면, 요소와 관련된 리스너는 메모리에 남아있습니다.

var a = document.createElement('div');
var b = document.createElement('p'); 
// Add event listeners to b etc...
a.appendChild(b);
a.removeChild(b); 
// A reference to 'b' still exists 
// Therefore the element and any associated event listeners are still retained.

코드 흐름상 저절로 child 변수에 다른 값을 재할당하거나 해서 참조를 끊을 수 없다면,
null 값을 할당해서 명시적으로 참조를 끊는 것이 좋다.

출처: https://interacting.tistory.com/148 [interacting]

출처:

• https://interacting.tistory.com/148
• https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory

[hochan222]

확인해봐야겠지만 innerHtml의 경우 삭제 됩니다. (실험할 예정)

#24