--- title: DOMContentLoaded slug: Web/API/Window/DOMContentLoaded_event translation_of: Web/API/Window/DOMContentLoaded_event original_slug: Web/Events/DOMContentLoaded ---

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

Прискорення

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

Основна інформація

Специфікація
HTML5
Інтерфейс
Подія
Спливання
Так
Можливість скасування
Так (однак скасування як простої події скасувати не можна)
 
 
 
 
Ціль
Документ
Типова дія
Немає.

Властивості

Властивість Тип Опис
target {{readonlyInline}} {{domxref("EventTarget")}} The event target (the topmost target in the DOM tree).
type {{readonlyInline}} {{domxref("DOMString")}} The type of event.
bubbles {{readonlyInline}} {{jsxref("Boolean")}} Whether the event normally bubbles or not.
cancelable {{readonlyInline}} {{jsxref("Boolean")}} Whether the event is cancellable or not.

Приклад

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>

Сумісність з браузерами

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] {{CompatGeckoDesktop("1")}}[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}}[1] {{CompatGeckoMobile("1")}}[1] {{CompatUnknown}}[2] {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1]

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

Подібні події