현대 브라우저 환경에서는 DOM 요소가 문서에서 제거될 때, 해당 요소에 등록된 이벤트 리스너(event listener) 역시 자바스크립트 메모리에서 함께 해제됩니다.
참조가 완전히 사라졌을 때만 적용된다
다만 주의할 점이 있습니다. 이 동작은 오직 해당 요소가 어디에서도 참조되지 않는 경우에만 일어납니다. 즉, 변수나 객체 등 어느 곳에도 요소에 대한 참조가 남아 있지 않아 가비지 컬렉터(Garbage Collector)가 회수할 수 있는 상태일 때에만, 그 요소의 이벤트 리스너들이 메모리에서 정리됩니다.
메모리 누수를 피하는 방법
만약 자바스크립트 코드 내 변수에 제거된 DOM 요소를 계속 참조하고 있다면, 브라우저는 가비지 컬렉션을 수행하지 못하고 요소와 그에 연결된 모든 이벤트 리스너가 메모리에 그대로 남게 되어 메모리 누수(memory leak)가 발생할 수 있습니다.
따라서 다음과 같은 습관을 들이는 것이 좋습니다.
- 요소를 제거하기 전에 removeEventListener()를 호출해 불필요한 리스너를 먼저 해제한다.
- DOM 요소를 담고 있는 변수나 배열, 객체 속성의 참조를 null로 초기화한다.
이처럼 참조 관계를 명확히 관리하면, 브라우저의 가비지 컬렉터가 요소와 리스너를 안정적으로 회수하여 보다 효율적인 메모리 사용이 가능합니다.