자바 스크립트 이벤트 리스너는 첨부 된 요소를 제거하기 전에 제거해야합니까?

Question

다양한 양식 수신기에 다양한 이벤트 리스너를 연결했다고 가정합니다. 나중에 전체 양식을 제거하려고합니다.

양식 및 해당 요소에있는 이벤트 처리기의 등록을 취소해야합니까? 그렇다면 요소 컬렉션에서 모든 리스너를 제거하는 가장 쉬운 방법은 무엇입니까? 그렇게하지 않는 것의 반향은 무엇입니까? 중요한 경우 Prototype을 사용하고 있습니다.

내가 실제로하는 일은 다음과 같습니다. 나는 다음과 같이 간단한 양식을 가지고

<form id="form"> 
    <input type="text" id="foo"/> 
    <input type="text" id="bar"/> 
</form> 

내가 예를 들어, 입력에 다양한 이벤트를 관찰 :

$('foo').observe('keypress', onFooKeypress); 
$('bar').observe('keypress', onBarKeypress); 

등

양식이 AJAX를 통해 제출과 응답이있다 양식의 새 사본. 이전 양식을 $('form').replace(newForm)과 같은 새로운 사본으로 대체합니다. 내가 이벤트 뭉치를 모으는 건가?

Answer 1

그래, 약간. 거대한 문제는 아니지만 IE의 구버전은 이러한 상황에서 유출 될 것입니다.

현재 프로토 타입 1.6.1 (현재 최종 후보)에서 라이브러리는 페이지 언로드시이 정리를 처리합니다. Prototype을 사용하여 이벤트 관찰자를 추가하면 해당 요소에 대한 참조가 배열에 유지됩니다. 언로드 페이지에서 해당 배열을 반복하고 모든 옵저버를 제거합니다.

그러나 사용자가 잠시 동안이 페이지에 머무를 경우 메모리 사용량은 페이지 수명 기간 동안 누적됩니다.

1. 양식, 대체 결코 극복 하나의 조상의 이벤트를 수신 : 당신은 몇 가지 옵션이 있습니다. 그런 다음 처리기에서 이벤트가 발생한 위치를 확인합니다. (즉, '이벤트 위임')

2. Element#replace을 호출하기 전에 모든 통화를 명시 적으로 등록 취소하십시오. 귀하의 예제에서는, 당신은 할 줄 :

   $('foo', 'bar').each(Element.stopObserving); 
   

이 주어진 요소에 모든 핸들러를 제거하는 효과가 인수와 stopObserving를 호출하는 것과 같습니다.

내가 옵션을 추천 할 것 1.

(우리는 Element#update 및 Element#replace의 일환으로 프로토 타입의 향후 버전에서 자동 리스너 제거하는 것에 대해 얘기했습니다,하지만 성능 트레이드 오프입니다.)

Answer 2

등록되지 않은 이벤트는 자동으로 메모리를 비울 수 없습니다. 이는 특히 IE의 구버전에서 문제가됩니다.

프로토 타입에 자동 가비지 수집 시스템이 있지만 버전 1.6에서는이 메소드가 제거되었습니다. 문서는 here입니다. 메서드 제거로 인해 가비지 수집이 더 이상 수행되지 않거나 더 이상 공개적으로 사용할 수없는 메서드인지 여부는 알 수 없습니다. 또한 페이지 언로드시에만 호출된다는 점에 유의하십시오. 즉, 많은 AJAX 및 DOM 업데이트를 수행하는 동안 사용자가 오랫동안 같은 페이지에 머물러 있으면 한 페이지 방문 중에도 메모리가 허용치를 넘을 수 있습니다.

Answer 3

Jonas가 아래에 언급 한 시나리오의 경우 DOM에서 제거 된 요소에서 이벤트 리스너를 제거하는 것이 좋습니다.