qual a diferença entre os métodos preventDefault() e stopPropagation() no JavaScript?

Sem enrolação: ambos os métodos são usados para controlar o comportamento de eventos em JavaScript, especialmente em situações como o clique de um botão.

preventDefault():

• Uso: cancela a ação padrão que o navegador executaria para esse evento.
• Exemplo: em um formulário, ao clicar em “Enviar”, o navegador normalmente recarregaria a página. Usando event.preventDefault(), podemos impedir esse comportamento.
• Uso típico: formulários, links (<a>), submissão de dados, etc.

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Impede o envio do formulário
});

stopPropagation():

• Uso: impede que o evento continue “subindo” (propagando) pela árvore de elementos do DOM.
• Exemplo: se você tem um botão dentro de uma ‎<div>, e ambos têm um event listener de clique, ao clicar no botão, o evento normalmente também acionaria o listener da ‎<div>. Usando ‎event.stopPropagation(), impedimos que o evento chegue a <div>.
• Uso típico: quando você quer que apenas o elemento clicado reaja ao evento, sem afetar elementos pais.

btn.addEventListener('click', function(event) {
  event.stopPropagation(); // Não será "enxergado" pelo elemento pai
});

Resumo:

• preventDefault() bloqueia a ação padrão do navegador para aquele evento.
• stopPropagation() bloqueia a propagação do evento para elementos pais.

E você ainda pode usar ambos juntos, dependendo do que deseja controlar no seu código. 😉