Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить подія beforeunload?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> `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` - це "останній шанс" сказати браузеру:
> "Стій! У користувача є незбережені дані."

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати410 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.