# События загрузки страницы

1. `DOMContentLoaded` — браузер загрузил HTML и построил DOM-дерево.
2. `load` — браузер загрузил все ресурсы (стили, шрифты и т.д.).
3. `beforeunload` и `unload` — закрытие страницы.

## DOMContentLoaded <a href="#domcontentloaded" id="domcontentloaded"></a>

Происходит на `document` когда все DOM-элементы разметки уже созданы, к ним можно получить доступ, вешать обработчики событий, создавать динамические элементы.

В момент возникновения этого события могут быть не загружены шрифты, изображения, подключаемые файлы стилей.

```
document.addEventListener('DOMContentLoaded', callback)
```

Если в документе есть теги `script`, то браузер обязан их выполнить до того, как построит DOM.&#x20;

`DOMContentLoaded` ждёт загрузки и выполнения таких скриптов, за исключением скриптов с атрибутами `async` и `defer`, которые подгружаются асинхронно.&#x20;

Подключаемые файлы стилей никак не влияют на событие `DOMContentLoaded`.

[Статья о DomContentLoaded](https://varvy.com/performance/domcontentloaded.html)

## load <a href="#load" id="load"></a>

Событие срабатывает на `window`, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д.&#x20;

Используется редко, ибо нет нужды ждать загрузку всех ресурсов.

## beforeunload <a href="#beforeunload" id="beforeunload"></a>

Событие срабатывает на `window`. Используется для проверки сохранения введенных пользователем данных и действительно ли он хочет покинуть страницу.

Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик `beforeunload` может приостановить процесс и спросить подтверждение. Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая – нужно ли переходить.

## unload <a href="#unload" id="unload"></a>

Когда пользователь уходит со страницы или закрывает окно, на `window` срабатывает событие `unload`.&#x20;

Можно закрыть вспомогательные popup-окна.

Нельзя отменить сам переход.&#x20;

Событие используется редко.

## &#x20;<a href="#rasprostranenie-sobytii" id="rasprostranenie-sobytii"></a>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/events/sobytiya-zagruzki-stranicy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.