[javascript] DOM 요소가 제거되면 해당 리스너도 메모리에서 제거됩니까?

최신 브라우저

일반 자바 스크립트

제거 된 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.

jQuery

jQuery의 관련 메소드 (예 🙂 remove()가 정확히 같은 방식으로 작동 한다고 가정하는 것이 좋습니다 (예를 들어 remove()사용 된 것으로 간주 removeChild()).

그러나 이것은 사실이 아닙니다 . jQuery 라이브러리에는 실제로 DOM에서 제거 할 때 요소와 관련된 모든 데이터 / 이벤트를 자동으로 정리 하는 내부 메소드 (문서화되지 않았으며 이론상 언제든지 변경 될 수 있음)가 있습니다 cleanData() (여기서는이 메소드의 모양입니다 ) (통해이 될. remove(), empty(), html("")등).

이전 브라우저

오래된 브라우저, 특히 오래된 IE 버전은 이벤트 리스너가 연결된 요소에 대한 참조를 유지하기 때문에 메모리 누수 문제가있는 것으로 알려져 있습니다.

레거시 IE 버전 메모리 누수를 해결하는 데 사용되는 원인, 패턴 및 솔루션에 대한 자세한 설명을 보려면 Internet Explorer 누출 패턴 이해 및 해결에 대한이 MSDN 문서 를 읽어보십시오 .

이와 관련된 몇 가지 기사가 더 있습니다.

• JScript 메모리 누수
• IE8에서 메모리 누수
• 자바 스크립트 메모리 누수

이 경우 리스너를 수동으로 직접 제거하는 것이 좋은 습관 일 것입니다 (메모리가 애플리케이션에 매우 중요하고 실제로 이러한 브라우저를 대상으로하는 경우에만).

답변

remove: function( selector, keepData ) {
    var elem,
        i = 0;

    for ( ; (elem = this[i]) != null; i++ ) {
        if ( !selector || jQuery.filter( selector, [ elem ] ).length ) {
            if ( !keepData && elem.nodeType === 1 ) {
                jQuery.cleanData( elem.getElementsByTagName("*") );
                jQuery.cleanData( [ elem ] );
            }

            if ( elem.parentNode ) {
                elem.parentNode.removeChild( elem );
            }
        }
    }

    return this;
}

$('body').on('click', '#someEl', function (event){
  console.log(event);
});

$('#someEL').remove(); // removing the element from DOM

$._data(document.body, 'events');