Qual è la differenza tra l'attributo onBlur e onChange in HTML?

Quando viene chiamato uno contro l'altro? C'è una situazione in cui onChange sarebbe stato chiamato ma onBlur non sarebbe stato chiamato?

L' onBlurevento viene generato quando ci si allontana da un oggetto senza averne necessariamente cambiato il valore.

L' onChangeevento viene chiamato solo quando hai modificato il valore del campo e perde il focus.

Potresti dare un'occhiata all'introduzione di quirksmode agli eventi . Questo è un ottimo posto per ottenere informazioni su cosa sta succedendo nel tuo browser quando interagisci con esso. Anche il suo libro è buono.

onblur si attiva quando un campo perde il focus, mentre onchange si attiva quando il valore di quel campo cambia. Tuttavia, questi eventi non si verificheranno sempre nello stesso ordine.

In Firefox, la tabulazione fuori da un campo modificato si attiverà su modifica e poi su sfocatura, e normalmente farà lo stesso in IE. Tuttavia, se premi il tasto Invio invece di Tab, in Firefox si attiverà onblur e poi onchange, mentre IE di solito si attiverà nell'ordine originale. Tuttavia, ho visto casi in cui IE attiva anche la sfocatura per prima, quindi fai attenzione. Non puoi presumere che onblur o onchange avvengano prima dell'altro.

Un esempio per rendere le cose concrete. Se hai una selezione così:

<select onchange="" onblur="">
  <option>....
</select>

la onblur()si chiama quando si esce. La onchange()si chiama quando si seleziona un'opzione diversa dalla selezione - per esempio, si cambia quello che è attualmente selezionato come.

In Firefox onchange si attiva solo quando si preme il tasto tab oppure si fa clic all'esterno del campo di immissione. Lo stesso vale per Onblur. La differenza è che onblur si attiverà indipendentemente dal fatto che tu abbia cambiato qualcosa nel campo o meno. È possibile che INVIO attivi uno o entrambi, ma non lo sapresti se disabiliti INVIO nei moduli per evitare invii imprevisti.

onBlur è quando la tua attenzione non è più sul campo in questione.

La proprietà onblur restituisce il codice del gestore di eventi onBlur, se presente, che esiste sull'elemento corrente.

onChange è quando il valore del campo cambia.

Penso che sia importante notare qui che onBlur () si attiva a prescindere.

Questo è un thread utile ma l'unica cosa che non chiarisce è che onBlur () verrà attivato ogni volta.

onChange () si attiverà solo quando il valore viene modificato.

onChange è quando qualcosa all'interno di un campo cambia, ad esempio, scrivi qualcosa in un input di testo.

onBlur è quando distogli il focus da un campo, ad esempio stavi scrivendo in un input di testo e hai fatto clic su di esso.

Quindi in realtà sono quasi la stessa cosa, ma perché onChange si comporti nel modo in cui onBlur fa qualcosa in quell'input deve cambiare.