«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Здесь мы разберем, как работают и для чего нужны события load и DOMContentLoaded в JavaScript.

Веб-страница загружается постепенно: какое-то время уходит на формирование DOM-дерева, потом загружаются внешние ресурсы: изображения, стили. В конце происходит загрузка js-скриптов.

И если js-скрипт начинает работать тогда, когда структура DOM-дерева еще не готова - можно получить ошибку.

В JavaScript есть события, учитывая которые можно избежать подобных проблем.



События load и DOMContentLoaded

Событие load — происходит, когда загрузилась и веб-страница, и все ресурсы для её отображения: стили, картинки и так далее.

Событие load не часто используется в реальных проектах, так как большая картинка может долго загружаться и ожидать ее появления - это не всегда то, что является приоритетным.

Событие DOMContentLoaded — происходит, когда браузер разобрал веб-страницу и составил DOM-дерево.

Таким образом, событие DOMContentLoaded стоит в приоритете перед событием load, так как для корректного выполнения js-скрипта, как правило, достаточно загрузки DOM-дерева.

Событие load и DOMContentLoaded - Синтаксис

События DOMContentLoaded и load срабатывают на объекте window.

Событие DOMContentLoaded так же срабатывает и на объекте document.

Для работы с событиями DOMContentLoaded и load используется метод addEventListener - он позволяет назначить обработчик для этих событий: это функция в тело которой помещается js-скрипт, который должен быть исполнен.

Итак, каков синтаксис при работе с событиями DOMContentLoaded и load?

JavaScript-код

'use strict';

window.addEventListener("load", function () {
    console.log("Объект window - Событие load");
  });
  
window.addEventListener("DOMContentLoaded", function () {
    console.log("Объект window - DOM loaded");
});

// Событие DOMContentLoaded можно обрабатывать и на объекте document
document.addEventListener("DOMContentLoaded", () => {
    console.log("Объект document - DOM loaded");
});

// Событие load нельзя обрабатывать на объекте document
document.addEventListener("load", () => {
    console.log("Объект document - Событие load");
});

Результат в консоли

Объект document - DOM loaded
Объект window - DOM loaded
Объект window - Событие load

Результат в Браузере

Из примера видно: для объекта document нельзя назначить обработчик для события load. При этом код НЕ будет выполняться. То есть событие load обрабатывается только для объекта window.

Итак, рекомендуется и в большинстве случаев так и происходит: js-скрипт выполняется после загрузки DOM-дерева. То есть после того, как произошло событие DOMContentLoaded.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4

Тематические публикации
Популярные заметки
Последние заметки