Далее на странице...
Здесь мы разберем, как работают и для чего нужны события 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.
