Criar páginas web interativas com JavaScript exige a compreensão e o controle dos eventos que ocorrem durante a navegação do usuário. Os eventos permitem que desenvolvedores capturem e respondam a ações como cliques, digitação, movimentação do mouse ou envio de formulários. Neste artigo vamos apresentar exemplos práticos para adicionar, manipular e controlar eventos, transformando elementos estáticos em componentes dinâmicos.
O que são eventos na web?
Eventos na web são interações que ocorrem em uma página ou aplicação, representando ações realizadas pelos usuários ou pelo sistema. Eles englobam desde simples cliques em botões até a digitação de caracteres e a movimentação do mouse. Quando um evento é acionado, ele pode desencadear respostas específicas do navegador, permitindo interações dinâmicas com elementos da página.
Alguns exemplos de eventos comuns:
- Clique (click): quando o usuário clica em um elemento;
- Movimentação do mouse (mousemove): quando o mouse se move sobre um elemento;
- Teclado (keydown, keyup): quando uma tecla é pressionada ou liberada;
- Carregamento de página (load): quando um recurso ou a página inteira é carregado;
- Formulários (submit): quando um formulário é enviado.
Estes eventos são a base para criar comportamentos dinâmicos, e a manipulação adequada deles possibilita melhorar a interatividade da página e proporcionar uma experiência do usuário mais rica.
Manipulação de eventos com JavaScript
A manipulação de eventos em JavaScript é feita por meio de “ouvintes de eventos” (event listeners), que “ouvem” quando um evento específico acontece e, em seguida, executam uma função chamada manipulador de eventos (event handler).
Adicionando um event listener
O método “addEventListener” é uma maneira moderna e flexível de adicionar manipuladores de eventos a elementos HTML.
<button id="MeuBotao">Clique aqui!</button>
<script>
const button = document.getElementById('MeuBotao');
button.addEventListener('click', function() {
alert('Botão clicado!');
});
</script>
Parâmetros nos Eventos
Alguns eventos fornecem informações adicionais através de um objeto de evento, acessível como parâmetro da função associada. Este objeto contém detalhes como o elemento acionador e a posição do cursor.
<input type="text" id="CampoTexto" placeholder="Digite algo">
<script>
const input = document.getElementById('CampoTexto');
input.addEventListener('input', (event) => {
console.log(`Elemento clicado: ${event.target.tagName}`);
});
</script>
Aqui, a função associada recebe um parâmetro chamado “event”, que contém informações sobre o evento. Utilizamos “event.target.tagName” para exibir no console o nome do elemento clicado (neste caso, será “INPUT”).
Isso pode ser útil para validar entradas de formulário em tempo real, fornecendo feedback instantâneo ao usuário, rastrear cliques, analisar o comportamento do usuário ou criar elementos interativos baseados na posição do clique.
Removendo um Event Listener
Quando precisamos evitar que um comportamento previamente associado a um evento continue ocorrendo, podemos utilizar o método “removeEventListener”. Essa abordagem é útil em situações onde a funcionalidade precisa ser desativada temporária ou permanentemente, como pausar interações em um botão após um clique ou desativar um evento de movimento do mouse para melhorar o desempenho. Para usar esse método, é necessário que a função associada ao evento tenha um nome definido.
<button id="Ativar">Ativar</button>
<button id="Desativar">Desativar</button>
<script>
const ativar = document.getElementById('Ativar');
const desativar = document.getElementById('Desativar');
function mostrarMensagem() {
alert('Evento ativado!');
}
ativar.addEventListener('click', mostrarMensagem);
desativar.addEventListener('click', () => {
ativar.removeEventListener('click', mostrarMensagem);
alert('Evento desativado!');
});
</script>
A função “mostrarMensagem” é adicionada ao evento click do botão “Ativar” usando “addEventListener”. No botão “Desativar”, usamos “removeEventListener” para remover o evento associado ao botão “Ativar”. Um alerta é exibido para informar que o evento foi desativado.
Eventos comuns
Existem diversos eventos disponíveis em JavaScript. Vamos explorar os mais utilizados, organizados por categoria.
Eventos do Mouse
Agora vamos exemplificar utilizando o evento “’mousemove”:
<div id="Area" style="width: 200px; height: 100px; background-color: lightblue;">
Passe o mouse aqui
</div>
<script>
const area = document.getElementById('Area');
area.addEventListener('mousemove', (event) => {
console.log(`Coordenadas: X=${event.clientX}, Y=${event.clientY}`);
});
</script>
No exemplo acima, o evento “mousemove” é usado para detectar o movimento do cursor dentro da área. O objeto “event” fornece as coordenadas do cursor, acessadas através de “event.clientX” e “event.clientY”, que são exibidas no console.
Eventos de input
Esses eventos monitoram interações em campos de entrada de dados. Eles podem ser utilizados para destacar visualmente os campos ativos em um formulário, ajudando o usuário a identificar claramente onde está digitando.
Exemplo com evento “focus” e “blur”:
<input type="text" id="Nome" placeholder="Digite seu nome">
<script>
const nome = document.getElementById('Nome');
nome.addEventListener('focus', () => {
nome.style.backgroundColor = 'yellow';
});
nome.addEventListener('blur', () => {
nome.style.backgroundColor = '';
});
</script>
O evento focus altera a cor de fundo do campo para amarelo quando ele recebe o foco, ou seja, quando clicamos no input. Já o evento blur restaura a cor original quando o campo perde o foco.
Eventos do teclado
Esses eventos lidam com interações relacionadas ao teclado. Eles são úteis para implementar funcionalidades como atalhos de teclado, captura de comandos personalizados, preenchimento dinâmico de campos ou interações baseadas em teclas específicas
Abaixo temos um exemplo de tratamento do evento keydown
<div id="Resultado"></div>
<script>
document.addEventListener('keydown', (event) => {
const resultado = document.getElementById('Resultado');
resultado.innerText = `Tecla pressionada: ${event.key}`;
});
</script>
Neste exemplo, o evento “keydown” é usado para capturar a tecla pressionada pelo usuário. O texto exibido no elemento com id definido como “Resultado” é atualizado com a tecla correspondente, acessada através de “event.key”.
Conclusão
Existem muitos outros eventos além dos mostrados, e para cada necessidade específica, você deve buscar o evento que melhor se adequa ao seu caso. A escolha do evento certo depende do comportamento que você deseja capturar, como interações do usuário, mudanças no conteúdo ou animações. Com a prática, você aprenderá a combinar eventos e a criar comportamentos dinâmicos para melhorar a experiência do usuário. Consulte a documentação para explorar mais opções e aprimorar suas habilidades em JavaScript.