В чем разница между stopPropagation и preventDefault?

В чем разница между stopPropagation и preventDefault?

Это два разных метода для управления поведением событий в JavaScript. Они решают разные задачи и важно понимать их различие.

Что такое Event и его жизненный цикл

Когда происходит событие (клик, ввод текста и т.д.), оно проходит три фазы:

Okno (Window)
  ↓
Document
  ↓
Element
  ↓
Target Element ← Event occurs here
  ↓
Element
  ↓
Document
  ↓
Window

Фазы:
1. Capturing (захват) — идёт вниз по дереву
2. Target — событие на целевом элементе
3. Bubbling (всплытие) — идёт вверх по дереву

stopPropagation()

stopPropagation() останавливает всплытие события (bubbling). Событие не поднимается дальше по дереву DOM.

<div id="outer" style="border: 2px solid blue; padding: 20px;">
  Outer div
  <button id="inner">Click me</button>
</div>

<script>
  // Обработчик на outer
  document.getElementById('outer').addEventListener('click', () => {
    console.log('Outer div clicked');
  });
  
  // Обработчик на button
  document.getElementById('inner').addEventListener('click', (event) => {
    console.log('Button clicked');
    // event.stopPropagation(); // если раскомментировать
  });
</script>

Без stopPropagation:

Клик на кнопку
  ↓
Button clicked
  ↓
Outer div clicked ← Событие всплывает дальше

С stopPropagation:

Клик на кнопку
  ↓
Button clicked
  ↓
Остановилось (не всплывает дальше)

preventDefault()

preventDefault() отменяет стандартное поведение события. Событие всё ещё всплывает, но браузер не выполняет своё действие по умолчанию.

<a href="https://example.com" id="link">Click me</a>

<script>
  document.getElementById('link').addEventListener('click', (event) => {
    console.log('Link clicked');
    event.preventDefault(); // Не переходим по ссылке
  });
</script>

Без preventDefault:

Клик на ссылку
  ↓
Link clicked (логируем)
  ↓
Переходим на https://example.com (стандартное поведение)

С preventDefault:

Клик на ссылку
  ↓
Link clicked (логируем)
  ↓
Не переходим на сайт (стандартное поведение отменено)

Сравнительная таблица

┌──────────────────┬──────────────────┬──────────────────┐
│ Методы           │ stopPropagation  │ preventDefault    │
├──────────────────┼──────────────────┼──────────────────┤
│ Что делает?      │ Останавливает    │ Отменяет         │
│                  │ всплытие события │ стандартное      │
│                  │                  │ поведение        │
│                  │                  │                  │
│ Влияет на        │ Родительские     │ Браузер          │
│                  │ элементы         │                  │
│                  │                  │                  │
│ Событие          │ ОСТАНАВЛИВАЕТСЯ  │ ПРОДОЛЖАЕТ       │
│ поднимается?     │                  │ всплывать        │
│                  │                  │                  │
│ Используй когда  │ Не хочешь,       │ Хочешь отменить  │
│                  │ чтобы родители   │ действие по      │
│                  │ знали о событии  │ умолчанию        │
└──────────────────┴──────────────────┴──────────────────┘

Практический пример 1: Клик на ссылку

<a href="/logout" id="logoutLink">Logout</a>

<script>
  document.getElementById('logoutLink').addEventListener('click', (e) => {
    // Спрашиваем подтверждение
    if (!confirm('Вы уверены?')) {
      e.preventDefault(); // Отменяем переход
    }
    // Событие всё ещё всплывает
  });
  
  // Родитель узнает о клике
  document.body.addEventListener('click', () => {
    console.log('Кто-то кликнул на странице');
  });
</script>

Практический пример 2: Модальное окно

<div id="modal" style="background: rgba(0,0,0,0.5);">
  <div id="modalContent" style="background: white; padding: 20px;">
    <p>Это модальное окно</p>
    <button id="closeBtn">Close</button>
  </div>
</div>

<script>
  // Если кликнуть на modal (фон), закрыть
  document.getElementById('modal').addEventListener('click', () => {
    modal.style.display = 'none';
    console.log('Modal closed (фон)');
  });
  
  // Если кликнуть на modalContent, НЕ закрывать
  document.getElementById('modalContent').addEventListener('click', (e) => {
    e.stopPropagation(); // Не всплывает на modal
    console.log('Modal content clicked');
  });
  
  // Close button
  document.getElementById('closeBtn').addEventListener('click', (e) => {
    e.stopPropagation(); // Не закроем modal
    modal.style.display = 'none';
    console.log('Close button clicked');
  });
</script>

Практический пример 3: Форма и её элементы

<form id="myForm">
  <input type="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<script>
  // Перехватываем отправку формы
  document.getElementById('myForm').addEventListener('submit', (e) => {
    console.log('Form submitted');
    
    // Не отправляем форму в браузер
    e.preventDefault();
    
    // Отправляем через AJAX
    fetch('/api/submit', { method: 'POST', body: new FormData(myForm) })
      .then(res => res.json())
      .then(data => console.log('Success:', data));
  });
  
  // Родитель всё ещё узнает о событии
  document.body.addEventListener('submit', () => {
    console.log('Something was submitted');
  });
</script>

Практический пример 4: Right-click контекстное меню

<div id="content">
  Right-click на этот контент
</div>

<script>
  document.getElementById('content').addEventListener('contextmenu', (e) => {
    e.preventDefault(); // Отменяем стандартное контекстное меню
    
    // Показываем своё меню
    const customMenu = document.createElement('div');
    customMenu.textContent = 'My custom menu';
    customMenu.style.position = 'absolute';
    customMenu.style.left = e.clientX + 'px';
    customMenu.style.top = e.clientY + 'px';
    document.body.appendChild(customMenu);
  });
</script>

Практический пример 5: Клавиатурные события

<input type="text" id="myInput" placeholder="Try typing">

<script>
  document.getElementById('myInput').addEventListener('keydown', (e) => {
    // Если нажата Enter, не отправляем форму
    if (e.key === 'Enter') {
      e.preventDefault();
      console.log('Enter was blocked');
    }
    
    // Только цифры разрешены
    if (!/[0-9]/.test(e.key)) {
      e.preventDefault();
    }
  });
</script>

Когда использовать stopPropagation

// ✅ Правильно: dropdown меню
menuButton.addEventListener('click', (e) => {
  e.stopPropagation(); // Не закрываем menu
  toggleMenu();
});

// ✅ Правильно: модальное окно
modalContent.addEventListener('click', (e) => {
  e.stopPropagation(); // Не закрываем modal
});

// ❌ Неправильно: используем когда не нужно
button.addEventListener('click', (e) => {
  e.stopPropagation(); // Лишнее, если нет родительских обработчиков
});

Когда использовать preventDefault

// ✅ Правильно: форма
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Отменяем стандартную отправку
  submitViaAjax();
});

// ✅ Правильно: ссылка
link.addEventListener('click', (e) => {
  e.preventDefault(); // Отменяем переход
  navigate('/path');
});

// ✅ Правильно: контекстное меню
element.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // Отменяем браузерское меню
});

Комбинирование

Можно использовать оба одновременно:

button.addEventListener('click', (e) => {
  e.preventDefault(); // Отменяем стандартное поведение
  e.stopPropagation(); // Останавливаем всплытие
});

// Но обычно нужен только один из них

Итоги

stopPropagation():

• Останавливает всплытие события (bubbling)
• Не влияет на стандартное поведение браузера
• Родительские элементы НЕ услышат событие

preventDefault():

• Отменяет стандартное поведение события
• Не влияет на всплытие
• Родительские элементы УСЛЫШАТ событие

Помни:

• Отправка формы → preventDefault()
• Переход по ссылке → preventDefault()
• Контекстное меню → preventDefault()
• Модальное окно → stopPropagation()
• Dropdown меню → stopPropagation()