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?

— 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

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

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

Ainda não estou certo sobre a diferença entre os dois. Eles parecem muito semelhantes a partir de suas descrições.

— Justin Morgan

@JustinMorgan Como no exemplo JSFiddle, o onchangeocorre "quando o elemento perde o foco", enquanto oninputocorre a cada mudança de texto.

— Ionică Bizău

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

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

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

@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

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