preventDefault

Many browser events have a default action: forms submit and reload the page, anchor tags navigate away. e.preventDefault() cancels that default while still running your handler.

const form = document.querySelector('#login-form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stops page reload

  const username = document.querySelector('#username').value;
  if (!username) {
    showError('Username required');
    return;
  }
  sendToServer({ username });
});

Preventing Link Navigation

document.querySelector('a.modal-trigger').addEventListener('click', (e) => {
  e.preventDefault();
  openModal();
});

submit vs click on Buttons

Listen on the <form> element's submit event rather than the submit button's click event. The submit event also fires when the user presses Enter in a text field — the click event does not.

// Prefer this:
form.addEventListener('submit', handler);

// Not this — misses keyboard submission:
btn.addEventListener('click', handler);