Differenza tra evento "change" e "input" per un elemento "input"

109

Qualcuno può dirmi qual è la differenza tra i file changeinput eventi e ?

Sto usando jQuery per aggiungerli:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

Funziona anche con inputinvece dichange .

Forse qualche differenza nell'ordinamento degli eventi rispetto al focus?

— Gabriel Petrovay
fonte

rakshasingh.weebly.com/1/post/2012/12/… Nota che oninput non è supportato nei browser meno recenti. Potresti quindi usare: onchange, onpaste e onkeyup come soluzione alternativa. PS: anche l'evento oninput è difettoso in IE9 e non viene attivato all'eliminazione.

— A. Wolff

l'input si attiva più spesso, come dopo la pressione di un tasto, mentre il cambiamento fondamentalmente si attiva quando l'input è sfocato e il valore non è quello che era quando l'input era focalizzato.

— dandavis

L' inputevento cattura anche l'incollaggio. Vedi stackoverflow.com/questions/15727324/…

— Antony,

TLDR: l'input si attiva durante la digitazione, cambia fuoco quando si fa clic all'esterno

— Muhammad Umer

Risposte:

117

Secondo questo post :

oninput si verifica quando il contenuto di testo di un elemento viene modificato tramite l'interfaccia utente.
onchangesi verifica quando la selezione, lo stato controllato o il contenuto di un elemento sono cambiati . In alcuni casi, si verifica solo quando l'elemento perde il focus o quando si preme return(Invio) e il valore è stato modificato. L'attributo onchange può essere utilizzato con: <input>, <select>e <textarea>.

TL; DR:

oninput: qualsiasi modifica apportata al contenuto del testo
onchange:
- Se è un <input />: cambia + perde il focus
- Se è <select>: cambia opzione

$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
  <option>Alice</option>
  <option>Bob</option>
  <option>Carol</option>
  <option>Dave</option>
  <option>Emma</option>
</select>
<pre></pre>

Espandi lo snippet

— Ionică Bizău
fonte

Non sono ancora chiara la differenza tra i due. Suonano molto simili dalle tue descrizioni.

— Justin Morgan,

@JustinMorgan Come nell'esempio JSFiddle, si onchangeverifica "quando l'elemento perde il focus" mentre si oninputverifica ad ogni cambio di testo.

— Ionică Bizău,

La differenza è che l'evento oninput si verifica immediatamente dopo che il valore di un elemento è cambiato, mentre onchange si verifica quando l'elemento perde il focus, dopo che il contenuto è stato modificato.

— NinoLopezWeb

In altre parole "input" viene attivato immediatamente quando un carattere viene modificato, cancellato o aggiunto mentre "change" viene valutato dopo che il controllo perde il focus e si verifica solo quando il valore è cambiato

— Adam Moszczyński

Ho appena provato con Chrome. onchangeviene attivato anche quando si preme Invio mentre si è ancora concentrati.

— Rick il

Si change eventattiva nella maggior parte dei browser quando il contenuto viene modificato e l'elemento perde focus. È fondamentalmente un aggregato di modifiche. Non si attiverà per ogni singola modifica come nel caso input event.
Si input eventattiva in modo sincrono alla modifica del contenuto per l'elemento. Di conseguenza, il listener di eventi tende a attivarsi più frequentemente.
I diversi browser non sempre concordano se un evento di modifica debba essere attivato per determinati tipi di interazione

— Gabe
fonte

Non credo che l'evento di input sia garantito per attivarsi in modo sincrono.

— Tim Down

Inoltre, le versioni correnti di tutti i browser supportano l' inputevento.

— Tim Down

@ TimDown, ecco perché ho detto che il supporto del browser varia. Non tutti hanno la versione corrente di tutti i browser.

— Gabe

@TimDown Si attiva in modo sincrono?

— Suraj Jain

@ SurajJain: non sono sicuro, ad essere onesto.

— Tim Down

La documentazione MDN ha una spiegazione chiara (non so quando è stata aggiunta):

L'evento cambiamento è licenziato per input, selectetextarea gli elementi quando una modifica il valore dell'elemento è commesso da parte dell'utente. A differenza dell'evento di input, l'evento di modifica non viene necessariamente generato per ogni alterazione del valore di un elemento .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

— Joel H
fonte