Fare listener di eventi Javascript devono essere rimossi prima di rimuovere l'elemento che stanno attaccati?

Question

Supponiamo Ho allegato una varietà di ascoltatori di eventi a vari elementi del modulo. Più tardi, voglio rimuovere l'intero modulo.

E 'necessario (o suggerito) per annullare la registrazione di eventuali gestori di eventi che esistono sul modulo e dei suoi elementi? Se è così, qual è il modo più semplice per rimuovere tutti gli ascoltatori su un insieme di elementi? Quali sono le ripercussioni di non farlo? Sto utilizzando Prototype, se è importante.

Ecco quello che sto realmente facendo. Ho una forma semplice, in questo modo:

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

Osservo vari eventi sugli ingressi, per esempio:.

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

ecc.

Il modulo viene inviato tramite la tecnologia AJAX e la risposta è una nuova copia del modulo. Sostituisce la vecchia forma, con una copia del nuovo facendo qualcosa di simile $('form').replace(newForm). Sto accumulando un sacco di cruft evento?

Answer 1

Si, un po '. Non abbastanza per essere un problema enorme, ma le vecchie versioni di IE perderà in quelle circostanze.

Come di Prototype 1.6.1 (attualmente in suo candidato versione finale), la libreria gestisce questo pulitura a pagina scarico. Quando si utilizza prototipo aggiungere un osservatore evento, mantiene un riferimento a tale elemento in un array; a pagina scarico, si scorre tale matrice e rimuove tutti i vostri osservatori.

Tuttavia, se l'utente sta per rimanere su questa pagina per un po ', l'utilizzo di memoria si accumulano nel corso della vita della pagina. Sono disponibili diverse opzioni:

1. Ascolta per gli eventi su un antenato della forma, quella che non viene mai sostituito. Poi, nel vostro gestore, controllare dove l'evento è venuto da. (Vale a dire, "la delega evento")

2. In modo esplicito annullare la registrazione tutte le chiamate prima di chiamare Element#replace. Nel tuo esempio, faresti:

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

Questo è equivalente alla chiamata stopObserving senza argomenti, che ha l'effetto di eliminare tutti gestori su un determinato elemento.

mi sento di raccomandare l'opzione 1.

(Abbiamo parlato di fare rimozione automatica ascoltatore in una futura versione di prototipo come parte di Element#update e Element#replace, ma si tratta di un trade-off prestazioni.)

Answer 2

Eventi che non sono non registrati non possono liberare la loro memoria automaticamente. Questo è un problema soprattutto nelle vecchie versioni di IE.

prototipo usato per avere un sistema di garbage collection automatico per questo, ma il metodo è stato rimosso nella versione 1.6. È documentato qui . Se la rimozione del metodo significa che la raccolta dei rifiuti non avviene più, o il metodo semplicemente non è più a disposizione del pubblico, non lo so. Si noti inoltre che è stato sempre e solo chiamato a pagina scarico, il che significa che se gli utenti rimanere sulla stessa pagina per un lungo periodo di tempo mentre si fa un sacco di aggiornamenti AJAX e DOM, la memoria potrebbe fuoriuscire a livelli inaccettabili anche durante quella una pagina visita.

Answer 3

E 'sempre bene di togliere qualunque listener di eventi da elementi che vengono rimossi dal DOM in caso di scenario che Jonas indicata di seguito.