Suggest an edit

Improve this article

Refine the answer for “What does the beforeunload event do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

> `beforeunload` is an event that fires **right before the current page is unloaded** from the browser's memory.
> It happens when the user:
>
> - closes the tab or window,
> - reloads the page,
> - follows a link or enters a new URL.

## 1. A simple example

```javascript
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = ''; // required!
});
```

After this, the browser shows a **leave-confirmation dialog**:

> Are you sure you want to leave this page?
> Changes you made may not be saved.

### Important:

- Modern browsers **do not let you set your own text** in this dialog.
(you used to be able to set `event.returnValue = 'Are you sure?'`, but that is now ignored).
- This is done **for security and UX reasons** - so sites cannot "blackmail" the user ("stay with us!").

## 2. When to use it

Used when the user might **lose unsaved changes**, for example:

- editing text but hasn't clicked "Save";
- filling out a form;
- writing a comment;
- doing something in an app with unsaved state.

```javascript
let formChanged = false;

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

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

Now, if the user has changed the form and tries to leave, a warning appears.

## 3. An example without a warning (just a "hook" before leaving)

If you just need to run cleanup or logic before unloading (without a dialog):

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

This event is the last point where you can save data to `localStorage` or `sessionStorage`.

## 4. The difference between beforeunload and unload

| Event | When it fires | Can it stop the navigation? | When to use it |
|---|---|---|---|
| `beforeunload` | Before unloading | Yes (via `preventDefault()`) | Warning about unsaved data |
| `unload` | After unloading has started | No | Cleanup, analytics, logging |

## Limitations

- You **cannot** use `alert()` or `confirm()` inside `beforeunload` - browsers block them.
- You should not run **asynchronous operations** (requests, `fetch`) - they won't have time to finish.
- It works **only in the browser window/tab**, not in frames.
- Better not to use it unless necessary - it is UX spam.

## Summary

| What it does | The `beforeunload` event |
|---|---|
| When it fires | Right before the user leaves the page |
| What it's for | Warning about the loss of unsaved data |
| How to stop it | `event.preventDefault()` + `event.returnValue = ''` |
| Custom text | Not allowed (the browser shows a standard one) |
| When it doesn't fit | For asynchronous actions - they won't have time to run |

> **Remember it simply:**
> `beforeunload` is a "last chance" to tell the browser:
> "Wait! The user has unsaved data."

Markdown · drag & drop images · ⌘B / ⌘I shortcuts491 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.