Diferença Keyup e onChange

Oii, Ana! Tudo bem?

Realmente, os eventos podem causar uma confusão inicialmente, uma vez que ambos são utilizados para capturar interações de um usuário. Porém, quando se trata de Angular, eles possuem um propósito diferente.

Aqui está um exemplo do comportamento de cada um no Angular:

O evento keyup é acionado cada vez que uma tecla retorna à posição original, ou seja, sempre que você solta a tecla. Isso que dizer que o keyup é chamado a cada vez que um caractere é inserido ou removido no campo de entrada.

Já o evento onChange é acionado quando o valor do elemento de entrada é alterado e o elemento perde o foco. Por exemplo, se você digitar algo no campo de entrada e não clicar fora ou mudar o foco, o onChange não será chamado.

E no contexto da aula, o keyup foi usado para implementar uma funcionalidade de pesquisa dinâmica, ou seja, ele faz uma busca enquanto você digita. Dessa forma, a cada vez que você solta uma tecla, a busca é atualizada automaticamente, o que permite receber resultados de pesquisa atualizados enquanto digita.

Caso o onChange fosse usado no lugar do keyup, a pesquisa só seria realizada quando o campo de entrada perdesse o foco, ou seja, quando você clicasse fora do campo ou mudasse o foco para outro elemento da interface. Isso poderia afetar a experiência do usuário negativamente.

Para mergulhar nas informações mais detalhadas, recomendo ter como apoio a documentação do Angular, é super útil para a pessoa Dev:

• Documentação Angular

A página pode aparecer em ingles, caso não se sinta confortável com o idioma, cliquei em qualquer parte da página com o botão direito do mouse e escolha a opção "Traduzir para o português".

Bons estudos, Ana!