Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 104 di 112
  • livello avanzato
Indice lezioni

onChange e onreadystatechange

Eventi che segnalano il cambio di stato di alcuni elementi del DOM, come le scelte nei form o il caricamento delle pagine HTML.
Eventi che segnalano il cambio di stato di alcuni elementi del DOM, come le scelte nei form o il caricamento delle pagine HTML.
Link copiato negli appunti

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

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

Ti consigliamo anche