Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.
Подія DOMContentLoaded визивається, коли вихідний HTML документ повністю завантажився та був parsed, без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є неймовірно популярою помилкою, тому будьте уважними.
Прискорення
Якщо ви хочете, щоб DOM запарсився (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і викрадати трафік у головного html документа.
Основна інформація
- Specification
- HTML5
- Interface
- Event
- Bubbles
- Yes
- Cancelable
- Yes (although specified as a simple event that isn't cancelable)
- Target
- Document
- Default Action
- None.
Властивості
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
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>
Браузерна сумісність
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0[1] | 1.0 (1.7 or earlier)[1] | 9.0[2] | 9.0 | 3.1[1] |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes)[1] | 1.0 (1)[1] | ?[2] | (Yes) | (Yes)[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 не буде готовий.