Qual é a diferença entre o atributo onBlur e onChange em HTML?

Quando um é chamado em relação ao outro? Existe uma situação em que onChange seria chamado, mas onBlur não seria?

O onBlurevento é disparado quando você se afasta de um objeto sem necessariamente ter alterado seu valor.

O onChangeevento só é chamado quando você altera o valor do campo e ele perde o foco.

Você pode querer dar uma olhada na introdução aos eventos do quirksmode . Este é um ótimo lugar para obter informações sobre o que está acontecendo em seu navegador quando você interage com ele. Seu livro também é bom.

onblur dispara quando um campo perde o foco, enquanto onchange dispara quando o valor desse campo muda. Esses eventos nem sempre ocorrerão na mesma ordem, no entanto.

No Firefox, a tabulação de um campo alterado irá disparar onchange e depois onblur, e normalmente fará o mesmo no IE. No entanto, se você pressionar a tecla enter em vez de tab, no Firefox ele irá disparar onblur e depois onchange, enquanto o IE geralmente dispara na ordem original. No entanto, já vi casos em que o IE também dispara o desfoque primeiro, então tome cuidado. Você não pode presumir que o onblur ou o onchange acontecerão antes do outro.

Um exemplo para tornar as coisas concretas. Se você tiver uma seleção assim:

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

o onblur()é chamado quando você navega para fora. O onchange()é chamado quando você seleciona uma opção diferente da seleção - ou seja, você altera o que está selecionado atualmente.

No Firefox, o onchange dispara apenas quando você usa a tecla Tab ou clica fora do campo de entrada. O mesmo é verdade para Onblur. A diferença é que o onblur disparará independentemente de você ter alterado alguma coisa no campo ou não. É possível que o ENTER dispare um ou ambos, mas você não saberia disso se desativar o ENTER em seus formulários para evitar submissões inesperadas.

onBlur é quando seu foco não está mais no campo em questão.

A propriedade onblur retorna o código do manipulador de eventos onBlur, se houver, que existe no elemento atual.

onChange é quando o valor do campo muda.

Acho importante observar aqui que onBlur () dispara independentemente.

Este é um tópico útil, mas a única coisa que não esclarece é que onBlur () irá disparar todas as vezes.

onChange () só disparará quando o valor for alterado.

onChange é quando algo dentro de um campo muda, por exemplo, você escreve algo em uma entrada de texto.

onBlur é quando você tira o foco de um campo, por exemplo, você estava escrevendo uma entrada de texto e clicou fora dela.

Na verdade, eles são quase a mesma coisa, mas para onChange se comportar da maneira que onBlur faz algo nessa entrada precisa ser alterado.