onChange e onreadystatechange

In questa lezione esaminiamo alcuni eventi legati alla modifica dello stato di alcuni elementi del DOM. A questo gruppo si possono ricondurre fondamentalmente due eventi:

Evento	Nome in addEventListener	Quando si attiva
onChange	change	quando il contenuto di un campo di un form è modificato o non è più selezionato
onReadyStateChange	readystatechange	quando lo stato del caricamento di un elemento cambia, l'evento è utile, ad esempio, per verificare che un elemento sia stato caricato, utilissimo quando utilizziamo AJAX.

onChange

Importante è dire qualcosa in più su onChange: l'evento assomiglia molto ad onBlur, ma verifica anche che l'elemento che lo richiama sia stato modificato. Questo evento, infatti, è attivato quando viene selezionato un altro elemento da una lista o quando si modifica un campo di testo, per cui oltre all'attivazione, occorre anche operare un'azione.

Ecco un esempio di onChange

primosecondoterzo

ed ecco il codice:

<select id="test">
<option value="primo" selected="selected">primo</option>
<option value="secondo">secondo</option>
<option value="terzo">terzo</option>
</select>

<script>
var testSelect = document.getElementById('test');
testSelect.addEventListener('change', function() {
	
	alert(this.value);
});
</script>

onredaystatechange

Questo evento è diventato molto famoso dopo l'introduzione massiva delle tecniche Ajax.

Si può utilizzare anche con l'oggetto document in alternativa a DOMContentLoaded o a onload per verificare il caricamento degli elementi delle pagine HTML:

document.addEventListener('readystatechange', function () {
	// alternativo a onDOMContentLoaded
    if (document.readyState == "interactive") {
        console.log('inizializzazione in corso');
		// init();
    }
	// alternativo a 'onload'
	if (document.readyState == "complete") {
		console.log('inizializzazione in corso');
		// init();
	}
});

Sia che lo utilizziamo per Ajax, sia che lo utilizziamo per rilevare il caricamento delle pagine, questo evento ci permette di verificare le modifiche dell'oggetto readyState, che assume valori diversi e significati diversi a seconda dell'elemento cui è associato.

In particolare l'oggetto document.readyState assume valori i seguenti valori:

Valore	Descrizione
uninitialized	Non è in corso alcun caricamento
loading	Caricamento in corso
loaded	È terminato solo il caricamento documento HTML.
interactive	Caricamento e parsing del documento HTML completo, sta caricando elementi collegati, immagini, script etc.
complete	È stato caricato tutto

mentre per XMLHttpRequest.readyState i valori sono i seguenti (ci sono anche alcune similitudini con gli stati di document):

Valore	stato	Descrizione
0	UNSENT	La richiesta non è stata inizializzata: non è stata chiamata ancora la open()
1	OPENED	Stabilita connessione con il server: open() è andata a buon fine ma non c'è ancora stata una send()
2	HEADERS_RECEIVED	La richiesta è stata ricevuta e sono disponibli gli header e lo stato: send() è andata a buon fine
3	LOADING	La richiesta è in elaboraizione, il trasferimento dei dati è in corso e le informazioni vengono memorizzate nella variabile responseText
4	DONE	Richiesta terminata. Tutti i dati sono stati scaricati

Eventi non standard

Per completezza segnaliamo altri due eventi che, implementati solo nei vecchi browser (es. IE5, 6 e 7), non sono stati inseriti negli standard moderni.

Evento	Descrizione
onCellChange	si attiva quando si modifica un elemento in un Database, per questa sua caratteristica ha un uso non propriamente legato a JavaScript
onPropertyChange	si attiva quando cambia la proprietà di un elemento