Що робить event.preventDefault()?

JavaScriptJunior~1 хв читання

Визначення

event.preventDefault() - скасовує типову поведінку, яку браузер виконує при певній події.

Подія все одно відбудеться (обробники спрацюють), але браузер не виконає свою стандартну дію.

Приклади стандартних дій

Елемент / подія	Стандартна поведінка браузера
`<a href="...">` + `click`	перехід за посиланням
`<form>` + `submit`	відправка форми і перезавантаження сторінки
`<input type="text">` + `keypress Enter`	може викликати відправку форми
Контекстне меню (`contextmenu`)	відкриття меню правої кнопки миші
`<checkbox>` + `click`	зміна стану (галочка/знято)

Приклад 1: скасування переходу за посиланням

javascript

<a href="https://google.com" id="link">Перейти</a>

<script>
  const link = document.querySelector('#link');

  link.addEventListener('click', (event) => {
    event.preventDefault(); // скасовуємо перехід
    console.log('Посилання клікнуто, але переходу немає');
  });
</script>

У консолі з'явиться повідомлення, але сторінка не перейде на Google.

Приклад 2: запобігання відправці форми

javascript

<form id="login">
  <input type="text" name="login" />
  <button>Відправити</button>
</form>

<script>
  const form = document.querySelector('#login');

  form.addEventListener('submit', (event) => {
    event.preventDefault(); // не даємо формі перезавантажити сторінку
    console.log('Форму оброблено вручну через JS');
  });
</script>

Зазвичай використовується, якщо ти хочеш відправити дані через JavaScript (fetch, axios), а не звичайною HTML-відправкою.

Приклад 3: вимкнення контекстного меню

javascript

document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  console.log('Контекстне меню вимкнено!');
});

Тепер правий клік не відкриє стандартне меню.

Приклад 4: комбінація зі stopPropagation()

Іноді потрібно і скасувати дію, і зупинити спливання:

javascript

button.addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('Клік перехоплено повністю');
});

Важливо

preventDefault() не зупиняє подію - інші обробники (на цьому ж елементі або вище) все одно спрацюють. Щоб перервати все, потрібно використовувати stopImmediatePropagation().
Працює лише з подіями, у яких є стандартна поведінка. Наприклад, на div click він нічого не робить, тому що клік по div не викликає стандартної дії.

Підсумок

Метод	Що робить	Приклад
`event.preventDefault()`	Скасовує поведінку браузера	Не переходити за посиланням, не відправляти форму
`event.stopPropagation()`	Припиняє спливання події	Не передавати подію батькам
`event.stopImmediatePropagation()`	Повністю зупиняє всі обробники	Перервати все

Запам'ятай просто: preventDefault() - "Не виконуй стандартну дію!" stopPropagation() - "Не піднімай подію вгору!"

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.