Qual é a diferença entre event.preventDefault e event.stopPropagation?

event.preventDefault() anula a ação padrão do navegador para um evento (por exemplo, navegar ao clicar em <a>), e event.stopPropagation() impede a propagação ou burbulhamento do evento na árvore DOM, evitando que os mesmos manipuladores sejam chamados em elementos pais ou filhos.

Exemplo:

// Suponhamos que haja um link dentro de um div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Manipulador de clique no link
link.addEventListener('click', (event) => {
  alert('Clique no link');
  event.preventDefault(); // Cancela a navegação do link
});

// Manipulador de clique no div
div.addEventListener('click', (event) => {
  alert('Clique no div');
  // Sem event.stopPropagation() este manipulador será chamado após o clique no link
});

Se adicionar event.stopPropagation() ao manipulador do link:

// Manipulador de clique no link com parada da propagação
link.addEventListener('click', (event) => {
  alert('Clique no link');
  event.preventDefault();
  event.stopPropagation(); // Impede a propagação do evento até o div
});

// Manipulador de clique no div
div.addEventListener('click', (event) => {
  alert('Clique no div'); // Este alert não será exibido ao clicar no link
});

Tabela resumida:

Método	Ação	Impacto no comportamento padrão	Impacto na propagação do evento
event.preventDefault()	Cancela a ação padrão do navegador	Sim	Não
event.stopPropagation()	Impede a propagação/burbulhamento do evento	Não	Sim