Eventos de teclado e mouse permitem que desenvolvedores capturem e respondam às interações dos usuários. Ao lidar com entradas do usuário de forma eficaz, é possível fornecer feedback, executar ações específicas ou aprimorar a experiência geral do usuário.

Eventos de Teclado

Eventos de teclado são acionados quando os usuários interagem com o teclado. Existem dois principais eventos de teclado:

Em um editor de texto ou qualquer formulário onde os usuários digitam, é comum capturar certas combinações de teclas (por exemplo, Ctrl + S para salvar ou Ctrl + Z para desfazer). Veja um exemplo onde teclas específicas são registradas para simular a detecção de atalhos em um formulário.

Neste exemplo, usuários digitam em um campo de entrada, e o script captura atalhos comuns de teclado como Ctrl + S para salvar ou Ctrl + Z para desfazer uma ação.

Manipulação de eventos do mouse

Eventos do mouse são acionados quando usuários interagem com o mouse ou touchpad. Os eventos de mouse mais utilizados são:

Vamos criar um exemplo onde uma dica de ferramenta é exibida quando o mouse passa sobre um botão.

Oferecer informações rápidas e contextuais sem sobrecarregar a interface é um caso de uso comum, melhorando a usabilidade e orientando os usuários em interfaces complexas.

Exemplo Prático: Duplo Clique para Editar com Ação de Salvar

Em muitas aplicações web modernas, os usuários podem dar um duplo clique para editar um item (como renomear um arquivo ou atualizar uma tarefa) e salvar suas alterações.

Neste exemplo, inicialmente, um parágrafo exibe a tarefa, que se torna editável ao receber um duplo clique, mostrando um campo de entrada e um botão "Salvar". O usuário pode modificar a tarefa e clicar em "Salvar" para aplicar as alterações; essa configuração evita mudanças acidentais por cliques simples. Após salvar, uma mensagem de status aparece para confirmar a atualização ou exibir um erro caso o campo esteja vazio.