Diferença entre keydown e keyup em JavaScript (keypress)

Neste artigo você vai aprender a diferença entre keydown e keyup em JavaScript, e também veremos o evento keypress

Fala programador(a), beleza? Bora aprender mais sobre os eventos de teclado de JavaScript!

Primeiramente vamos ver os conceitos:

• keydown: acontece primeiro, quando a tecla é pressionada;
• keyup: acontece por último, quando o usuário solta a tecla;

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

E o keypress? Funciona parecido com o keydown, mas não devemos mais nos preocupar com este

O keypress foi depreciado, então se você quer um efeito parecido utilize o keydown!

Todos estes eventos são adicionados aos elementos com o addEventListener, desta forma:

el.addEventListener("keyup", ev);
el.addEventListener("keydown", ev);

Onde el deve ser trocado pelo elemento que você deseja que execute o evento

E ev você substitui pela função a ser executada quando o evento acontecer

Uma outra curiosidade é que no keydown, quando o usuário não solta a tecla pressionada o evento não para de ser executado

Já o keyup é executado apenas uma única vez, ao soltar a tecla pressionada

Dica: Normalmente estes eventos são utilizados para validar um campo de formulário, após o usuário digitar algo

Neste caso o keydown é uma boa opção, pois o intervalo do keyup permite a submissão do form

Conclusão

Neste artigo você viu a diferença entre keydown e keyup em JS

Dois eventos que trabalham com a ação do usuário de pressionar algum tecla

Tendo o keydown como primeiro evento a ocorrer, assim que a tecla for pressionada

E o keyup em seguida, após o usuário soltar a tecla

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!