JavaScript Academy · Aula

preventDefault e stopPropagation

Controle o comportamento padrão e a propagação.

preventDefault e stopPropagation é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Controlando o comportamento dos eventos

Dois mecanismos permitem controlar os eventos: interromper a ação padrão do navegador e impedir que o evento percorra o DOM.

Ações padrão

Muitos elementos têm comportamentos padrão integrados: os links navegam, o envio de um formulário recarrega a página e as caixas de seleção alternam seu estado. Isso acontece a menos que você intervenha.

preventDefault

event.preventDefault cancela a ação padrão do navegador, mas ainda permite que seu manipulador seja executado.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault em formulários

Um uso comum é impedir que um formulário recarregue a página, para que você possa processar o envio com JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Propagação de eventos

Depois de atingir o destino, os eventos se propagam para cima pelos ancestrais, acionando seus ouvintes. É por isso que um clique em um filho pode executar o manipulador do pai.

stopPropagation

event.stopPropagation impede que o evento continue até os ancestrais. O manipulador atual ainda é concluído.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault e stopPropagation

Eles são independentes. preventDefault cancela a ação do navegador; stopPropagation impede o percurso até outros elementos. Você pode usar um deles, ambos ou nenhum.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Outros ouvintes no mesmo elemento

stopPropagation NÃO impede que outros ouvintes no mesmo elemento sejam executados. Eles ainda serão acionados.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation vai além: interrompe a propagação e também impede quaisquer ouvintes restantes no mesmo elemento.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Você pode verificar event.defaultPrevented para saber se preventDefault já foi chamado por um manipulador anterior.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Use com moderação

Interromper a propagação pode prejudicar a delegação de eventos em outras partes da página. Prefira essa prática apenas quando for realmente necessária e considere alternativas compatíveis com a delegação.

Verificação rápida

Escolha o método correto.

Recapitulação

preventDefault cancela a ação padrão do navegador (navegação, envio de formulário etc.). stopPropagation impede que o evento se propague até os ancestrais, enquanto stopImmediatePropagation também bloqueia outros ouvintes no mesmo elemento. Essas são ferramentas independentes; use a interrupção da propagação com moderação para evitar prejudicar a delegação.

Perguntas Frequentes

A aula “preventDefault e stopPropagation” é grátis?

Sim — o texto completo de “preventDefault e stopPropagation” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “preventDefault e stopPropagation”?

Controle o comportamento padrão e a propagação. Você pratica JavaScript 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 JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript 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 3 de 4.

Quanto tempo leva a aula “preventDefault e stopPropagation”?

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 JavaScript Academy?

Sim. Cada aula de JavaScript 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

← Voltar para JavaScript Academy