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

StackOverflow https://stackoverflow.com/questions/1138565

문제

다양한 이벤트 청취자를 다양한 형태의 요소에 첨부했다고 가정 해 봅시다. 나중에 전체 양식을 제거하고 싶습니다.

양식과 그 요소에 존재하는 이벤트 핸들러 등록을 해제해야합니까? 그렇다면 요소 모음에서 모든 청취자를 제거하는 가장 쉬운 방법은 무엇입니까? 그렇게하지 않는 반향은 무엇입니까? 중요하다면 프로토 타입을 사용하고 있습니다.

내가 실제로하는 일은 다음과 같습니다. 다음과 같은 간단한 형태가 있습니다.

<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). 나는 이벤트 cruft를 많이 축적하고 있습니까?

도움이 되었습니까?

해결책

예, 조금. 큰 문제는 충분하지 않지만, 그러한 상황에서 구형 버전의 IE가 누출됩니다.

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

그러나 사용자 가이 페이지에 잠시 동안 유지하려면 메모리 사용이 페이지 수명에 걸쳐 축적됩니다. 몇 가지 옵션이 있습니다.

  1. 이벤트를 듣습니다 선조 형식의, 결코 교체되지 않는 형식. 그런 다음 핸들러에서 이벤트가 어디에서 왔는지 확인하십시오. (예 : "이벤트 대표")

  2. 전화하기 전에 모든 통화를 명시 적으로 등록하지 마십시오 Element#replace. 예에서는 다음과 같습니다.

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

이것은 전화와 동일합니다 stopObserving 논쟁이없고, 제거의 효과가있는 모두 주어진 요소의 핸들러.

옵션 1을 추천합니다.

(우리는 향후 버전의 프로토 타입에서 자동 청취자 제거에 대해 이야기했습니다. Element#update 그리고 Element#replace, 그러나 그것은 성능 절충입니다.)

다른 팁

등록되지 않은 이벤트는 메모리를 자동으로 자유롭게 할 수 없습니다. 이것은 특히 이전 버전의 IE에서 문제입니다.

프로토 타입에는이를위한 자동 쓰레기 수집 시스템이 있었지만이 방법은 버전 1.6에서 제거되었습니다. 문서화되어 있습니다 여기. 방법을 제거한다는 것은 쓰레기 수집이 더 이상 발생하지 않거나 방법을 더 이상 공개적으로 사용할 수 없다는 것을 의미합니다. 또한 페이지 언로드에서만 호출 된 적이 있습니다. 즉, 사용자가 많은 AJAX 및 DOM 업데이트를하는 동안 사용자가 같은 페이지에 오랫동안 머무르면 한 페이지 방문 중에도 메모리가 용납 할 수없는 정도로 누출 될 수 있습니다.

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top