Життєвий цикл сторінки domcontentloaded, load, beforeunload, unload, javascript

Життєвий цикл HTML-сторінки складається з трьох важливих подій:

Кожна подія може використовуватися для різних цілей:
  • Подія DOMContentLoaded - DOM готовий, тому обробник може шукати вузли DOM. форматувати інтерфейс.
  • Подія load - завантажуються додаткові ресурси, і можна отримувати розміри зображень (якщо це не зазначено в HTML / CSS) і т. Д.
  • Подія beforeunload / unload - користувач залишає сторінку. Можна перевірити, чи зберіг користувач зміни, і запитати його, чи дійсно він хоче піти.

Розглянемо ці події докладніше.

DOMContentLoaded

Подія DOMContentLoaded відбувається в об'єкті документа. Необхідно використовувати addEventListener. щоб відстежити його:

На перший погляд подія DOMContentLoaded просте. Але є кілька особливостей.

DOMContentLoaded і скрипти

Коли браузер завантажує HTML і зустрічає в коді