Що робить подія beforeunload?

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

Визначення

beforeunload - це подія, яка спрацьовує перед вивантаженням (unload) поточної сторінки з пам'яті браузера. Вона виникає, коли користувач:

закриває вкладку або вікно,

перезавантажує сторінку,

переходить за посиланням або вводить новий URL.

1. Простий приклад

javascript

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = ''; // обов'язково!
});

Після цього браузер покаже діалог підтвердження виходу:

Ви дійсно хочете залишити сторінку? Введені дані можуть бути втрачені.

Важливо:

Сучасні браузери не дозволяють задавати власний текст у цьому вікні. (раніше можна було event.returnValue = 'Ви впевнені?', але зараз це ігнорується).
Це зроблено з міркувань безпеки та UX - щоб сайти не могли "шантажувати" користувача ("залишайтесь з нами!").

2. Коли використовувати

Використовується, якщо користувач може втратити незбережені зміни, наприклад:

редагує текст, але не натиснув "Зберегти";
заповнює форму;
пише коментар;
робить щось у застосунку з незбереженим станом.

javascript

let formChanged = false;

document.querySelector('form').addEventListener('input', () => {
  formChanged = true;
});

window.addEventListener('beforeunload', (e) => {
  if (formChanged) {
    e.preventDefault();
    e.returnValue = '';
  }
});

Тепер, якщо користувач змінив форму і намагається піти, з'явиться попередження.

3. Приклад без попередження (просто "hook" перед виходом)

Якщо потрібно просто виконати очищення чи логіку перед вивантаженням (без діалогу):

javascript

window.addEventListener('beforeunload', () => {
  localStorage.setItem('lastVisited', new Date().toISOString());
});

Ця подія - остання точка, де можна зберегти дані у localStorage чи sessionStorage.

4. Різниця між beforeunload та unload

Подія	Коли спрацьовує	Чи можна зупинити вихід?	Коли використовувати
`beforeunload`	Перед вивантаженням	Так (через `preventDefault()`)	Попередження про незбережені дані
`unload`	Після початку вивантаження	Ні	Очищення, аналітика, логування

Обмеження

Не можна використовувати alert() чи confirm() всередині beforeunload - браузери блокують.
Не варто виконувати асинхронні операції (запити, fetch) - вони не встигнуть завершитись.
Працює тільки у вікні/вкладці браузера, не у фреймах.
Краще не використовувати без потреби - UX-спам.

Підсумок

Що робить	Подія `beforeunload`
Коли спрацьовує	Перед тим, як користувач покине сторінку
Для чого потрібна	Попередити про втрату незбережених даних
Як зупинити	`event.preventDefault()` + `event.returnValue = ''`
Власний текст	Не можна (браузер покаже стандартний)
Коли не підходить	Для асинхронних дій - не встигнуть виконатись

Запам'ятай просто: beforeunload - це "останній шанс" сказати браузеру: "Стій! У користувача є незбережені дані."

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

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

Premium

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