Eventos de Teclado
Os eventos de teclado ocorrem quando um usuário interage com o teclado, como pressionar uma tecla, liberar uma tecla ou digitar caracteres. Os eventos de teclado nos permitem fazer coisas legais, como verificar se um usuário digitou algo corretamente em um formulário ou fazer com que certas ações aconteçam quando teclas específicas são pressionadas. É como se o site estivesse ouvindo quais teclas você pressiona e reagisse de acordo. Existem três tipos de eventos de teclado e eles são:
O keydown Evento
Este evento de teclado é acionado quando um usuário pressiona uma tecla. Ele é acionado repetidamente se um usuário mantiver pressionada uma tecla.
1 |
document.addEventListener('keydown', function(event) { |
2 |
console.log('Key pressed is:', event.key); |
3 |
});
|
Este código demonstra como o keydown obras de eventos. Ele adiciona um ouvinte de evento ao objeto do documento keydown evento. Quando uma tecla do teclado é pressionada, a função especificada é executada. Esta função registra uma mensagem no console. A mensagem inclui a string A tecla pressionada é: seguido do valor de event.keyque representa a tecla que foi pressionada.
O keyup Evento
Este evento de teclado ocorre quando uma tecla é liberada. Ele pode ser usado para detectar quando um usuário libera uma tecla específica.
1 |
document.addEventListener('keyup', (event) => { |
2 |
var name = event.key; |
3 |
alert(`Key pressed: ${name}`); |
4 |
}, false); |
O código acima adiciona um ouvinte de evento ao keyup evento tal que quando uma tecla é liberada no teclado, ele executa uma função de seta. Esta função de seta atribui o valor de event.key a uma variável chamada name e representa a chave que foi liberada. Uma caixa de alerta aparece quando a tecla é liberada e exibe uma mensagem que inclui a string Tecla pressionada: seguido pelo valor da variável de nome usando interpolação de string (${name}).
Outro exemplo que pode ser usado para demonstrar a keyup O evento está configurando um campo de entrada e criando uma função que transforma os caracteres digitados no campo de entrada em letras maiúsculas quando o usuário solta uma tecla. Para experimentar o exemplo abaixo, crie uma tag de entrada com um id de fname e uma função como esta onkeyup="myFunction()" dentro da tag de entrada.
1 |
function myFunction() { |
2 |
let x = document.getElementById("fname"); |
3 |
x.value = x.value.toUpperCase(); |
4 |
}
|
O keypress Evento
O keypress O evento é acionado quando uma tecla é pressionada. No exemplo de código abaixo, um ouvinte de evento é adicionado ao objeto de documento que executa uma função quando uma tecla é pressionada e um valor de caractere é produzido. A função de seta registra uma mensagem no console do navegador que inclui a string Tecla pressionada: seguido do valor de event.keyque representa o valor do caractere da tecla pressionada.
1 |
document.addEventListener('keypress', (event) => { |
2 |
console.log('Key pressed:', event.key); |
3 |
});
|
É importante observar que alguns navegadores não suportam mais o keypress evento e eut não é disparado para todas as chaves (como Alt, Ctrl, Mudançaou Esc) em todos os navegadores. Recomenda-se usar o keydown ou keyup eventos em vez disso.
Exemplo de uso dos eventos do teclado
Eventos do mouse
Os eventos do mouse, por outro lado, ajudam na criação de sites mais atraentes. Eles manipular eventos que ocorrem quando o mouse interage com o documento HTML como clicar, mover ou rolar. Eles nos permitem reagir quando os usuários clicam nos botões do mouse, movem o mouse sobre elementos ou arrastam itens pela tela. É como se o site estivesse rastreando os movimentos e cliques do mouse para descobrir o que você deseja fazer. Existem vários tipos de eventos de mouse e são eles:
O click Evento
Este evento é executado quando um usuário clica em um elemento.
1 |
var element = document.querySelector('.btn'); |
2 |
element.addEventListener('click', function () { |
3 |
element.style.backgroundColor = 'blue'; |
4 |
});
|
Para executar o código acima, crie um botão em HTML com um nome de classe CSS de btn. Então, o que o código acima faz é selecionar o elemento com um nome de classe CSS de btn usando o querySelector método e o atribui ao element variável. Um ouvinte de evento que escuta o click evento é adicionado ao elemento. Quando o elemento é clicado, uma função especificada será executada. Neste caso, a função é mudar a cor de fundo do elemento para azul.
Você também pode criar um jogo simples em que os usuários podem clicar dentro de uma caixa para alterar continuamente a cor de fundo da caixa usando o botão math.floor e math.random método para gerar cores aleatórias.
O dbclick Evento
Este evento chama uma função quando um usuário clica duas vezes em um elemento com o mouse. Para executar o exemplo de código abaixo, crie um botão em HTML com um nome de classe CSS de btn. Pegue o elemento usando o querySelector método e adicione um ouvinte de evento a ele. Quando o botão é clicado duas vezes, a função é invocada, uma mensagem de alerta é exibida e o tamanho da fonte do texto no botão aumenta.
1 |
var button = document.querySelector('.btn'); |
2 |
button.addEventListener('dblclick', function (event) { |
3 |
alert('Button double-clicked!'); |
4 |
button.style.fontSize = '40px'; |
5 |
});
|
Uma forma avançada de dbclick evento pode ser usado é permitir que os usuários editem o conteúdo. Clicar duas vezes em um elemento de texto, por exemplo, pode convertê-lo em um campo de entrada editável, permitindo que os usuários façam alterações diretamente. Abaixo está uma demonstração de edição de conteúdo usando o dbclick evento.
O mouseup e mousedown Eventos
Esse mousedown O evento é acionado quando um usuário pressiona um botão do mouse quando o cursor está sobre um elemento. Crie um botão com um id de texto. Quando o botão é clicado com o mouse, ele alerta uma mensagem “Botão do mouse pressionado”.
1 |
var button = document.getElementById('text'); |
2 |
button.addEventListener('mousedown', function (event) { |
3 |
alert('Mouse button pressed!'); |
4 |
});
|
Considerando que a mouseup evento é acionado quando o usuário solta o botão do mouse após clicar em um elemento. Crie um botão com um id de text. Quando o botão é clicado com o mouse e solto, ele alerta uma mensagem Botão do mouse liberado.
1 |
var button = document.getElementById('text'); |
2 |
button.addEventListener('mouseup', function (event) { |
3 |
alert('Mouse button released!'); |
4 |
});
|
Um exemplo prático de como essas mouseup e mousedown eventos podem ser usados é ao implementar uma funcionalidade de arrastar e soltar e para desenhar e esboçar.
O mouseover e mouseout Evento
O mouseover evento ocorre quando o ponteiro do mouse passa sobre um elemento, enquanto o mouseout O evento ocorre quando o ponteiro do mouse sai do elemento. Aqui está uma demonstração rápida desses dois eventos de mouse.
Na demonstração acima, a imagem é ampliada quando o mouse do usuário passa sobre a imagem e volta ao seu tamanho normal quando o mouse sai da imagem.
O mouseover O evento pode ser usado para criar uma dica de ferramenta que fornece informações adicionais sobre um elemento ao passar o mouse sobre ele. O mouseover e mouseout Os eventos também podem ser usados para criar menus de navegação interativos de forma que, quando o ponteiro do mouse do usuário passar sobre um item de menu, ele poderá fazer aparecer submenus.
O mousemove e mouseleave Eventos
O mousemove O evento é acionado quando o usuário move o cursor do mouse sobre um elemento e o mouseleave O evento é acionado quando o cursor do mouse sai do elemento. Esses eventos permitem que os desenvolvedores monitorem os movimentos do mouse.
O código acima obtém o coordenadas do ponteiro do mouse sempre que o mouse de um usuário estiver dentro do div container e exibe os valores das coordenadas em um texto abaixo da caixa. Em seguida, exibe outro texto indicando que o ponteiro deixou o div depois que o mouse do usuário sai do div elemento.
Conclusão
Eventos de teclado como keydown, keyup, e o pressionamento de tecla nos permite capturar e responder à entrada do usuário no teclado. Os eventos de teclado são essenciais para a interação do usuário, esteja você implementando validação de formulário, fornecendo atalhos de teclado ou criando jogos baseados em texto. Eventos de mouse, por outro lado, como click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemovee mouseleavenos permitem capturar e responder às interações do usuário com o mouse.
Em conclusão, os eventos de teclado e mouse do JavaScript nos permitem construir sites que parecem estar ouvindo e respondendo às nossas atividades, capturando as teclas que são pressionadas e os movimentos do mouse. Agora que você aprendeu sobre os vários tipos de eventos de teclado e mouse e como eles podem ser usados para criar sites e aplicativos da web interativos, vá em frente e crie jogos e sites divertidos e interativos. Codificação feliz!
