Diferença entre evento de "mudança" e "entrada" para um elemento `entrada`

109

Alguém pode me dizer qual é a diferença entre os eventos changee input?

Estou usando o jQuery para adicioná-los:

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

Também funciona com em inputvez de change.

Talvez alguma diferença na ordem do evento em relação ao foco?

javascript jquery events dom Gabriel Petrovay
fonte
rakshasingh.weebly.com/1/post/2012/12/… Observe que oninput não é compatível com o navegador mais antigo. Você poderia usar então: onchange, onpaste e onkeyup como uma solução alternativa. PS: o evento oninput também apresenta erros no IE9 e não é acionado na exclusão.
A. Wolff
1
input dispara com mais freqüência, como após um pressionamento de tecla, enquanto change dispara basicamente quando a entrada está borrada e o valor não é o que era quando a entrada estava focada.
dandavis
O inputevento também captura colagem. Consulte stackoverflow.com/questions/15727324/…
Antony
1
TLDR: a entrada dispara conforme você digita, altera o disparo quando você clica fora
Muhammad Umer

Respostas:

117

De acordo com esta postagem :

  • oninput O evento ocorre quando o conteúdo de texto de um elemento é alterado por meio da interface do usuário.

  • onchangeocorre quando a seleção, o estado verificado ou o conteúdo de um elemento são alterados . Em alguns casos, só ocorre quando o elemento perde o foco ou ao pressionar return(Enter) e o valor foi alterado. O atributo onchange pode ser usado com: <input>, <select>, e <textarea>.

TL; DR:

  • oninput: qualquer alteração feita no conteúdo do texto
  • onchange:
    • Se for um <input /> : mudar + perder o foco
    • Se for uma <select>opção: alterar

$("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>
Expandir trecho

Ionică Bizău
fonte
7
Ainda não estou certo sobre a diferença entre os dois. Eles parecem muito semelhantes a partir de suas descrições.
Justin Morgan
10
@JustinMorgan Como no exemplo JSFiddle, o onchangeocorre "quando o elemento perde o foco", enquanto oninputocorre a cada mudança de texto.
Ionică Bizău
1
A diferença é que o evento oninput ocorre imediatamente após o valor de um elemento ser alterado, enquanto onchange ocorre quando o elemento perde o foco, após a alteração do conteúdo.
NinoLopezWeb
1
Em outras palavras, "entrada" é acionado imediatamente quando qualquer caractere é alterado, excluído ou adicionado, enquanto "mudança" é avaliada após o controle perder o foco e acontece apenas quando o valor mudou
Adam Moszczyński
Acabei de tentar com o Chrome. onchangetambém é acionado quando você pressiona Enter enquanto ainda está focando.
Rick
24

  • O change eventdispara na maioria dos navegadores quando o conteúdo é alterado e o elemento perde focus. É basicamente um agregado de mudanças. Não vai disparar para cada mudança, como no casoinput event .

  • O input eventdispara sincronicamente na mudança do conteúdo do elemento. Como tal, o ouvinte de evento tende a disparar com mais frequência.

  • Navegadores diferentes nem sempre concordam se um evento de mudança deve ser disparado para certos tipos de interação

Gabe
fonte
Não creio que o evento de entrada seja acionado de forma síncrona.
Tim Down de
Além disso, as versões atuais de todos os navegadores oferecem suporte ao inputevento.
Tim Down de
2
@TimDown, é por isso que eu disse que o suporte ao navegador varia. Nem todo mundo tem a versão atual de todos os navegadores.
Gabe
@TimDown Ele dispara de forma síncrona?
Suraj Jain
@SurajJain: Não tenho certeza, para ser honesto.
Tim Down
1

A documentação MDN tem uma explicação clara (não tenho certeza de quando foi adicionada):

O evento de alteração é acionado para input, selecte textareaos elementos, quando uma alteração ao valor do elemento é cometida pelo usuário. Ao contrário do evento de entrada, o evento de mudança não é necessariamente disparado para cada alteração no valor de um elemento .

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

Joel H
fonte