⚡ 5. Eventos
Visão Geral: Eventos em JavaScript permitem interatividade: capturam ações do usuário (como cliques, digitação e carregamento da página) e definem comportamentos a partir dessas ações.
5.1 Tipos de eventos
| Tipo | Descrição | Exemplo de Uso |
|---|---|---|
| click | Quando o usuário clica em um elemento | Botões, links, imagens |
| keydown | Pressionamento de tecla | Campos de texto, jogos |
| keyup | Tecla liberada | Validação em tempo real |
| submit | Envio de formulário | Validação antes de enviar |
| load | Carregamento completo da página | Inicialização de scripts |
| mouseover | Cursor do mouse passa sobre um elemento | Tooltips, efeitos hover |
| change | Alteração em campo de formulário | Selects, checkboxes |
Existem centenas de eventos. Os mais usados são os de clique, teclado, e carregamento.
5.2 Manipulando eventos
5.2.1 addEventListener
const botao = document.getElementById("meuBotao");
botao.addEventListener("click", function() {
alert("Botão clicado!");
});
Permite adicionar vários ouvintes ao mesmo elemento sem sobrescrever outros existentes.
🧪 Demonstração: Tipos de Eventos Básicos
// Resultados dos eventos aparecerão aqui
5.2.2 Evento de clique
document.querySelector("#exemplo").addEventListener("click", () => {
console.log("Clique detectado");
});
5.2.3 Evento de teclado
document.addEventListener("keydown", (event) => {
console.log(`Tecla pressionada: ${event.key}`);
});
5.2.4 Evento de carregamento
window.addEventListener("load", () => {
console.log("Página carregada completamente.");
});
Se quiser manipular elementos logo após o carregamento, use
DOMContentLoaded ou load.
5.3 Propagação de eventos
Eventos percorrem uma árvore de elementos. Há dois modos:
- Captura: de cima para baixo (document → elemento)
- Bolha: de baixo para cima (elemento → document)
5.3.1 Captura e bolha
document.body.addEventListener("click", () => {
console.log("Body clicado!");
}, true); // Captura: true
A ordem da propagação é controlada pelo terceiro argumento do
addEventListener.
🧪 Demonstração: Propagação de Eventos
Elemento Pai (clique aqui)
Elemento Filho (clique aqui)
Elemento Neto (clique aqui)
Log de eventos (clique nos elementos acima após configurar)
5.3.2 event.stopPropagation()
const interno = document.getElementById("interno");
interno.addEventListener("click", (e) => {
e.stopPropagation();
console.log("Clique interno (sem propagar)");
});
stopPropagation() impede que o evento continue subindo (ou descendo) na árvore.
🧪 Demonstração: stopPropagation()
Elemento Externo
Elemento Interno (com stopPropagation)
// Resultados do stopPropagation aparecerão aqui
5.4 event.preventDefault() (.extra)
const formulario = document.getElementById("formLogin");
formulario.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Formulário interceptado sem enviar");
});
Esse método é usado para impedir o comportamento padrão (como envio de formulário ou redirecionamento de link).
🧪 Demonstração: preventDefault()
Link de Exemplo (preventDefault)
// Resultados do preventDefault aparecerão aqui
🧠 Resumo
- Eventos reagem a ações do usuário (cliques, teclas, rolagem, etc.)
addEventListeneré a forma moderna e recomendada de escutar eventos.- Eventos se propagam (captura e bolha).
- Podemos interromper a propagação (
stopPropagation) ou comportamento padrão (preventDefault).
📋 Perguntas de Revisão
1. Qual a função do addEventListener?
Permite adicionar ouvintes de eventos a elementos, sem sobrescrever outros existentes.
2. Qual a diferença entre captura e bolha?
Captura vai do document para o elemento, bolha vai do elemento para o document.
3. Quando usar stopPropagation()?
Quando queremos impedir que o evento continue se propagando na árvore DOM.
4. Para que serve preventDefault()?
Impede o comportamento padrão do elemento (ex: envio de formulário, redirecionamento de link).