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;
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!