preventDefault vs stopPropagation

Model answer. They control two different things:

• `preventDefault()` cancels the browser's built-in action for that event: following a link, submitting a form and reloading the page, toggling a checkbox, scrolling on a wheel event. The event still propagates.
• `stopPropagation()` stops the event from travelling to other elements (bubbling or capturing). The default action still happens.

form.addEventListener('submit', event => {
  event.preventDefault();          // stay on the page
  sendWithFetch(new FormData(form));
});

menuPanel.addEventListener('click', event => {
  event.stopPropagation();         // a click inside the menu should not close it
});

preventDefault only works on cancelable events, and in passive listeners (often used for touch and wheel) it is ignored. Check event.defaultPrevented to see whether some handler already cancelled the action.