Действия браузера по умолчанию

Браузер выполняет действия по умолчанию: клик по ссылке → переход, submit формы → отправка и перезагрузка, контекстное меню → меню браузера. event.preventDefault() отменяет это действие. event.stopPropagation() останавливает распространение события. Это два разных механизма.

Типичные default actions:

• <a href="..."> — переход по ссылке
• <form> submit — отправка формы и перезагрузка страницы
• Контекстное меню (правая кнопка)
• Выделение текста
• <input type="submit"> — отправка формы

preventDefault():

document.querySelector('a').addEventListener('click', (e) => { e.preventDefault(); // переход по ссылке отменён console.log('Ссылка не работает!'); });

document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); // форма не отправится, страница не перезагрузится // ... своя логика });

Важно: preventDefault работает ТОЛЬКО в обработчике, где вызван.

Сравнение:

• preventDefault() — останавливает default action браузера
• stopPropagation() — останавливает распространение события

Они НЕЗАВИСИМЫ:

• preventDefault() + stopPropagation() — и отмена, и остановка
• preventDefault() без stopPropagation() — отмена, событие продолжает всплывать
• stopPropagation() без preventDefault() — событие остановлено, но default action происходит

return false (legacy): В inline handlers (onclick="...") return false предотвращает default action И останавливает propagation. Но в addEventListener return false ничего не делает. Не используйте return false в modern JavaScript.

preventDefault — как отмена заказа. Вы заказали доставку (браузер хочет перейти по ссылке), но передумали (preventDefault). Доставка отменена. stopPropagation — как закрытие двери. Событие (посылка) доходит до вас, но дальше не проходит. Разные механизмы.

**Самый простой:**

<a href="https://example.com">Ссылка</a>

<script>
document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Переход отменён!');
});
</script>

preventDefault() отменяет переход по ссылке.

**Простой:**

<form id="myForm">
  <input type="text" name="name">
  <button type="submit">Отправить</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log('Имя:', formData.get('name'));
  // Форма НЕ отправится, страница НЕ перезагрузится
});
</script>

preventDefault на submit: перехватываем отправку формы.

**Реальный пример:**

// Запрет контекстного меню
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  console.log('Контекстное меню запрещено');
});

// Запрет выделения текста
document.querySelector('.no-select').addEventListener('mousedown', (e) => {
  e.preventDefault();
});

// Кастомное контекстное меню
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  const menu = document.getElementById('custom-menu');
  menu.style.display = 'block';
  menu.style.left = e.pageX + 'px';
  menu.style.top = e.pageY + 'px';
});

Реальный пример: кастомное контекстное меню вместо стандартного.

**Неправильно:** Путать preventDefault и stopPropagation

**Почему:** preventDefault — отменяет действие браузера. stopPropagation — останавливает всплытие/погружение.

**Правильно:** preventDefault = «не делай то, что обычно делаешь». stopPropagation = «не передавай дальше».

**Неправильно:** Использовать return false в addEventListener

**Почему:** return false работает ТОЛЬКО в inline handlers. В addEventListener он ничего не делает.

**Правильно:** Используйте event.preventDefault() в addEventListener.

**Неправильно:** Думать, что preventDefault останавливает все listener'ы

**Почему:** preventDefault НЕ останавливает другие listener'ы на том же элементе. Он только отменяет default action.

**Правильно:** Для остановки propagation используйте stopPropagation.

• preventDefault() отменяет default action браузера
• stopPropagation() останавливает распространение
• Они независимы — можно комбинировать
• return legacy = legacy, не используйте в addEventListener
• preventDefault не останавливает другие listener'ы

Назад: Вы понимаете всплытие событий (DA2) и делегирование (DA3). Теперь вы учитесь управлять тем, что происходит при событиях.

Вперёд: Следующий урок (DA5) — пользовательские события: создание собственных типов событий.