addEventListener e objeto de evento
Associe ouvintes de eventos, receba o objeto Event, use preventDefault e stopPropagation e entenda a propagação de eventos.
addEventListener e objeto de evento é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são eventos?
Eventos são sinais emitidos pelo navegador quando algo acontece: o usuário clica, pressiona uma tecla ou move o mouse; a página é carregada; uma solicitação de rede é concluída. O JavaScript reage aos eventos adicionando ouvintes de eventos.
Sintaxe de addEventListener
element.addEventListener(type, handler) associa uma função a ser executada quando o evento ocorrer. O manipulador recebe um objeto Event com detalhes sobre o que aconteceu.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Tipos comuns de eventos
Mouse: clique, clique duplo, entrada do mouse, saída do mouse, movimento do mouse. Teclado: pressionamento de tecla, soltura de tecla, pressionamento de tecla. Formulário: envio, entrada, alteração, foco, perda de foco. Documento: carregamento do DOM, carregamento. Janela: redimensionamento, rolagem.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));O objeto de evento
Todo manipulador recebe um objeto de evento. Propriedades principais: e.target (elemento que disparou o evento), e.currentTarget (elemento ao qual o ouvinte está associado), e.type (nome do evento), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() impede a ação padrão do navegador. Use-o para impedir o envio de formulários, a navegação por links ou a abertura de menus de contexto com o botão direito em jogos.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() impede que o evento se propague pela árvore do DOM. Use-o quando o manipulador de um elemento interno não deve acionar o manipulador do elemento externo.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Propagação de eventos
Os eventos se propagam para cima: depois de ocorrerem no elemento-alvo, ocorrem no elemento pai, depois no avô e assim por diante, até o documento. É assim que funciona a delegação de eventos: associe um ouvinte a um elemento pai e use e.target para identificar o elemento filho que foi realmente clicado.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Padrão de delegação de eventos
Delegação de eventos é a prática de escutar em um elemento pai em vez de associar ouvintes a cada elemento filho. É mais eficiente e lida automaticamente com elementos filhos adicionados dinamicamente.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Eventos de teclado
Eventos de teclado ocorrem quando teclas são pressionadas. Use e.key (uma cadeia de caracteres como 'Enter', 'Escape' ou 'a') no código moderno. O código antigo usava e.keyCode (obsoleto). e.metaKey, e.ctrlKey e e.shiftKey detectam teclas modificadoras.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Removendo ouvintes de eventos
Use removeEventListener para desassociar um ouvinte. O manipulador precisa ser a mesma referência de função — funções anônimas não podem ser removidas. No React/Vue, normalmente não é necessário gerenciar isso manualmente.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Opção once
Envie { once: true } como terceiro argumento para remover automaticamente o ouvinte depois que ele for acionado uma vez. É útil para ações únicas, como fechar a tela inicial.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Opção capture
Por padrão, os ouvintes são acionados durante a fase de propagação, para cima. Envie { capture: true } para que sejam acionados durante a fase de captura, para baixo, antes dos próprios ouvintes do elemento-alvo.
Verificação rápida
Qual método impede o navegador de executar o comportamento padrão de um evento?
Recapitulação: eventos do DOM
addEventListener(type, handler) associa ouvintes. O objeto de evento fornece destino, tipo e métodos de controle. preventDefault() bloqueia comportamentos padrão. stopPropagation() interrompe a propagação. Use a delegação de eventos para obter eficiência e lidar com elementos filhos dinâmicos. Remova os ouvintes para evitar vazamentos de memória.
Perguntas Frequentes
A aula “addEventListener e objeto de evento” é grátis?
Sim — o texto completo de “addEventListener e objeto de evento” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “addEventListener e objeto de evento”?
Associe ouvintes de eventos, receba o objeto Event, use preventDefault e stopPropagation e entenda a propagação de eventos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “addEventListener e objeto de evento”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- querySelector e querySelectorAll
- addEventListener e objeto de evento
- Alterando conteúdo: textContent, innerHTML e classList
- Criando e anexando elementos