Что делают preventDefault и stopPropagation?

Когда происходит событие (например, клик), браузер выполняет стандартные действия (например, переход по ссылке при клике на <a>). preventDefault() отменяет это действие.

Пример:

document.querySelector('a').addEventListener('click', (e) => {
	e.preventDefault(); // Страница не перезагрузится
});

События в DOM всплывают (передаются от дочернего элемента к родительскому). stopPropagation() останавливает это всплытие:

button.addEventListener('click', (e) => {
	 e.stopPropagation(); // Родительский div не получит это событие
});

Эти методы полезны, когда нужно переопределить поведение по умолчанию или контролировать, какие элементы получат событие.