Diferenças entre onkeydown, onkeypress e onkeyup em JavaScript

Neste artigo você vai aprender as diferenças entre onkeydown, onkeypress e onkeyup em JavaScript – qual destes eventos utilizar?

Fala programador(a), beleza? Bora aprender mais sobre os eventos de onkeypress, onkeydown e também onkeyup!

Todos estes eventos tem papéis diferentes na hora de interagir com o HTML ou DOM

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Vamos começar pelo onkeydown – dos três é o que dispara primeiro, ou seja, tem a ativação mais rápida

Quando uma tecla é pressionada ao teclado, o evento onkeydown é disparado

Já o onkeypress é o intermediário, fica depois do onkeydown e antes do onkeyup – é bom lembrar também que este evento não é disparado em teclas que não geram caracteres

E por último o onkeyup é disparado quando a tecla é “solta” pelo usuário, ou seja, volta a sua posição normal

Se queremos cancelar um caractere em um input por exemplo, o onkeyup não é indicado pois ele é disparado após a inserção

Já o onkeydown é interessante para este fim, pois é ativado antes da inserção

É importante também lembrar que o evento de keypress tem diferenciação de código entre letras maiúsculas e minúsculas, já o keydown tem o mesmo código para todas independente de estar em uppercase

Conclusão

Neste artigo vimos as diferenças entre onkeydown, onkeypress e onkeyup em JavaScript

Basicamente é uma questão do tempo em que cada um é ativado, a ordem é: onkeydown, onkeypress e por fim onkeyup

Outra informação interessante é que o keypress tem diferenciação de código da key gerado entre letras maiúsculas e minúsculas, permitindo uma maior personalização

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube