Eventos: Como Responder às Ações do Utilizador
Clicks, submissões de formulários, scrolls — descobre como capturar estas ações e fazer algo com elas. É mais simples do que parece.
O Que São Eventos?
Quando um utilizador interage com o teu site — clica num botão, preenche um campo, faz scroll — o navegador regista isso como um evento. JavaScript permite-te “escutar” estes eventos e reagir a eles.
Pensa em eventos como conversas. O utilizador fala (clica, escreve, move o rato) e o teu código responde. Sem eventos, o teu site seria apenas uma página estática. Com eles, cria-se experiência real e interativa.
O melhor? Não é complicado. Com poucas linhas de código consegues transformar o comportamento do teu site. Vamos lá ver como funciona.
Os Tipos de Eventos Mais Comuns
Existem dezenas de eventos que podes usar. Mas a verdade é que a maioria dos projetos usa sempre os mesmos. Conhece estes e já resolveste 80% dos casos.
Click
O clássico. Dispara quando alguém clica num elemento. Usado em botões, links, qualquer coisa que reage ao clique.
Submit
Específico de formulários. Dispara quando o utilizador submete o formulário. Perfeito para validação.
Change
Dispara quando o valor de um input, select ou textarea muda. Útil para reações em tempo real.
Scroll
Dispara quando o utilizador faz scroll. Permite criar animações de entrada, carregamento infinito, etc.
Hover (mouseover/mouseout)
Dispara quando o rato entra ou sai de um elemento. Ideal para efeitos visuais e tooltips.
Keydown/Keyup
Dispara quando uma tecla é pressionada ou solta. Útil para atalhos, validação de entrada, etc.
Como Usar addEventListener
A forma moderna e correta de capturar eventos é usando
addEventListener
. É flexível, permite múltiplos listeners no mesmo elemento e é fácil de remover depois.
const botao = document.querySelector(‘.meu-botao’);
botao.addEventListener(‘click’, function() {
console.log(‘Botão foi clicado!’);
});
A sintaxe é simples: elemento, tipo de evento entre aspas, e depois a função que executa quando o evento acontece. A função recebe um objeto
event
com informações sobre o que aconteceu.
Exemplo Prático: Validar um Formulário
Quer validar um email quando o utilizador sai do campo? Usa o evento
blur
. Ou melhor ainda, valida enquanto escreve com
input
.
Técnicas Mais Avançadas (Mas Úteis)
Uma vez que dominas o básico, há alguns truques que tornam o código mais eficiente e elegante.
Event Delegation
Imagina que tens uma lista com 100 itens e cada um precisa reagir a cliques. Não adiciones 100 listeners — adiciona um listener na lista inteira. O evento “bubbles” para cima, e tu verificas qual elemento foi realmente clicado. Muito mais eficiente.
Prevent Default
Links têm comportamento padrão (navegar). Botões em formulários têm comportamento padrão (submeter). Com
event.preventDefault()
consegues parar isso e fazer algo customizado. Exemplo: validar antes de submeter.
Throttle e Debounce
Eventos como scroll ou resize disparam muito rapidamente — às vezes 60 vezes por segundo. Se tens código pesado ali, o site fica lento. Throttle limita a frequência (executa cada X milissegundos). Debounce espera que o utilizador pare (executa X milissegundos depois do último evento).
Exemplos do Mundo Real
Aqui estão casos que vais encontrar em projetos reais.
Menu Mobile Colapsável
Click no ícone hamburger alterna a classe “open” no menu. Com CSS, a classe open mostra/esconde o conteúdo. Simples e eficiente — sem JavaScript pesado.
Busca em Tempo Real
Enquanto o utilizador digita, um evento
input
filtra uma lista. A cada keystroke, a lista atualiza. Com debounce, não fica pesado.
Carrinho de Compras
Clicks em “adicionar ao carrinho” disparam eventos que atualizam a contagem. Usa event delegation para gerenciar múltiplos produtos sem listeners repetidos.
Animação ao Scroll
Quando um elemento entra na viewport (durante scroll), dispara uma animação. Com throttle, o código fica rápido e fluído.
Dicas Importantes (Que Vão Te Poupar Horas)
Sempre verifica se o elemento existe
Se procuras um elemento com
querySelector
e ele não existe, recebes
null
. Adicionar um listener em null causa erro. Sempre verifica:
if (elemento) { ... }
Usa classes em vez de IDs quando possível
IDs devem ser únicos. Se tens múltiplos elementos com o mesmo comportamento, usa classes e
querySelectorAll
. Mais flexível e reutilizável.
Remove listeners quando não precisas
Se crias elementos dinamicamente e depois os removes, remove também os listeners. Caso contrário, acumulas na memória e o site fica mais lento com o tempo.
Usa arrow functions com cuidado
Arrow functions não têm seu próprio
this
. Se precisas de
this
no handler, usa function declarations normais, não arrows.
Pronto Para Começar?
Eventos são o coração da interatividade web. Com
addEventListener
e estes conceitos básicos, consegues construir interfaces reativas e responsivas que reagem ao utilizador.
A melhor forma de aprender é experimentando. Pega num projeto pequeno, adiciona alguns listeners, e vê o que consegues fazer. Erros são parte do processo — não é grave.
Próximo passo? Aprende sobre DOM manipulation e animações. Com eventos + DOM + animações, tens o poder para criar quase qualquer interface que imagines.
Nota sobre este Artigo
Este artigo é informativo e educativo. Os exemplos apresentados são simplificados para fins de aprendizagem. Em projetos reais, considere fatores como compatibilidade cross-browser, acessibilidade e performance. O JavaScript evolui constantemente — consulte a documentação oficial MDN para as funcionalidades mais recentes e boas práticas atualizadas.
