В этом руководстве вы узнаете о событиях, связанных с загрузкой страницы в JavaScript, включая DOMContentLoaded, load, beforeunload и unload.
При открытии страницы последовательно происходят следующие события:
DOMContentLoaded— браузер полностью загрузил HTML и завершил построение дерева DOM. Однако он не загружал внешние ресурсы, такие как таблицы стилей и изображения. В этом случае вы можете начать выбор узлов DOM или инициализировать интерфейс.load— браузер полностью загрузил HTML, а также внешние ресурсы, такие как изображения и таблицы стилей.
Когда вы покидаете страницу, последовательно срабатывают следующие события:
beforeunload— срабатывает перед выгрузкой страницы и ресурсов. Вы можете использовать это событие, чтобы отобразить диалоговое окно подтверждения, чтобы подтвердить, действительно ли вы хотите покинуть страницу. Делая это, вы можете предотвратить потерю данных в случае, если вы заполняете форму и случайно нажимаете ссылку для перехода на другую страницу.unload— срабатывает, когда страница полностью выгрузилась. Это событие можно использовать для отправки аналитических данных или очистки ресурсов.
Обработка событий загрузки страницы
Для обработки событий страницы вы можете вызвать метод addEventListener() для объекта document :
document.addEventListener('DOMContentLoaded',() => {
// handle DOMContentLoaded event
});
document.addEventListener('load',() => {
// handle load event
});
document.addEventListener('beforeunload',() => {
// handle beforeunload event
});
document.addEventListener('unload',() => {
// handle unload event
});
В следующем примере показано, как обрабатывать события загрузки страницы:
<!DOCTYPE html>
<html>
<head>
<title>JS Page Load Events</title>
</head>
<body>
<script>
addEventListener('DOMContentLoaded',(event) => {
console.log('The DOM is fully loaded.');
});
addEventListener('load',(event) => {
console.log('The page is fully loaded.');
});
addEventListener('beforeunload',(event) => {
// show the confirmation dialog
event.preventDefault();
// Google Chrome requires returnValue to be set.
event.returnValue = '';
});
addEventListener('unload',(event) => {
// send analytic data
});
</script>
</body>
</html>