В чём разница между event.preventDefault() и event.stopPropagation()?

У всех событий в Javascript есть 3 фазы: погружение, таргет и всплытие:

Capturing (погружение): событие идёт сверху вниз по дереву элементов (от родителя к дочерним элементам).
Target (цель): событие достигает элемента, на котором непосредственно повесили обработчик (или того элемента, который является «целью» события).
Bubbling (всплытие): затем событие идёт снизу вверх (от дочернего элемента к родительским).

По умолчанию большинство событий обрабатываются на фазе всплытия (bubbling). Но при желании можно «перехватывать» их и на фазе погружения (capture), если установить соответствующий флаг при добавлении обработчика:

event.preventDefault() — блокирует стандартное действие элемента (например, переход по ссылке, отправку формы, контекстное меню). При этом событие продолжит распространяться дальше (погружение или всплытие не останавливаются).
event.stopPropagation() — прерывает дальнейшее всплытие (или погружение) события. Оно не влияет на стандартное действие элемента, а именно останавливает передачу события на вышестоящие (родительские) элементы DOM.

Чтобы лучше понять, разберем такой пример:

<html>
    <head></head>
    <body>
        <div id="parent" style="border: 1px solid red; padding: 20px">
            Parent
            <a id="child" href="#" style="display: block; margin-top: 10px">
                Child (ссылка)
            </a>
        </div>
          
          <script>
          document.getElementById('parent')
          .addEventListener('click', 
          (event) => { 
          console.log('Клик на PARENT'); 
          }); 
          
          document.getElementById('child')
          .addEventListener('click', (event) => { 
            event.preventDefault(); // отменит переход по ссылке
            event.stopPropagation(); // отменит событие parent, но оставит click
          console.log('Клик на CHILD')}); 
          </script>
    </body>
</html>