Vamos aprender sobre o propósito do método preventDefault() em eventos. Todo evento que é disparado no DOM possui algum tipo de comportamento padrão. O evento click em uma caixa de seleção alterna o estado dessa caixa de seleção, por padrão. Pressionar a barra de espaço em um botão focado ativa o botão. O método preventDefault() nesses objetos de evento impede que esse comportamento aconteça. Vamos dar uma olhada em um exemplo. Vamos definir um elemento input para o usuário digitar:

<link rel="stylesheet" href="styles.css">
<label>Enter some characters:
  <input type="text">
</label>

label {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus {
  border-color: #0078d4;
  box-shadow: 0 0 3px rgba(0, 120, 212, 0.5);
  outline: none;
}

E se olharmos para o resultado, podemos digitar no campo de entrada como esperado. Mas talvez não queiramos isso. Talvez, em vez disso, queiramos mostrar o caractere que o usuário digita em um elemento separado. Primeiro, vamos definir nosso elemento para isso:

<link rel="stylesheet" href="styles.css">
<label>Enter some characters:
  <input type="text">
</label>
<p id="output"></p>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

label {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

input[type="text"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-top: 0.5rem;
  outline: none;
}

input[type="text"]:focus {
  border-color: #007BFF;
}

#output {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #555;
}

E então, precisamos conectar ao evento keydown para escutar quando um caractere é digitado no teclado. Observe que não queremos os eventos change ou input aqui, porque precisamos das informações do teclado.

const input = document.querySelector("input");

input.addEventListener("keydown", (e) => {
    
})

O evento keydown é disparado quando você pressiona uma tecla do teclado. Quando isso acontecer, vamos exibir o caractere no nosso elemento p.

<link rel="stylesheet" href="styles.css">
<label>Enter some characters:
  <input type="text">
</label>
<p id="output"></p>
<script src="index.js"></script>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

label {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

input[type="text"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-top: 0.5rem;
  outline: none;
}

input[type="text"]:focus {
  border-color: #007BFF;
}

#output {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #555;
}

const input = document.querySelector("input");
const output = document.getElementById("output");

input.addEventListener("keydown", (e) => {
  output.innerText = You pressed the ${e.key} key;
});

e.key fornece o valor da tecla pressionada, como a para a tecla a ou Enter para a tecla Enter. Com o código acima, quando você digitar no input, o caractere que você digitar será exibido no elemento p. Isso é ótimo, mas não queremos mostrar os caracteres no input também. É aqui que nosso método preventDefault() entra em ação. O comportamento padrão de um keydown é renderizar o caractere na entrada. Vamos evitar isso chamando e.preventDefault():

<link rel="stylesheet" href="styles.css">
<label>Enter some characters:
  <input type="text">
</label>
<p id="output"></p>
<script src="index.js"></script>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

label {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

input[type="text"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-top: 0.5rem;
  outline: none;
}

input[type="text"]:focus {
  border-color: #007BFF;
}

#output {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #555;
}

const input = document.querySelector("input");
const output = document.getElementById("output");

input.addEventListener("keydown", (e) => {
  e.preventDefault();
  output.innerText = You pressed the ${e.key} key;
});

E assim, você evitou o comportamento padrão para permitir que você implemente seu próprio tratamento de eventos personalizado. Outro exemplo comum de quando usar o método e.preventDefault está relacionado a envios de formulários. Por padrão, enviar um formulário envia dados para o servidor e recarrega a página. Usar e.preventDefault() previne que isso aconteça.

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // rest of code goes here
});

Prevenir o comportamento padrão é ótimo quando você precisa de mais controle sobre como um usuário interage com a página, mas é importante ter em mente aspectos como acessibilidade – seu comportamento personalizado deve fornecer os mesmos recursos que o padrão.