Задать вопрос
@undefined_title
javascript

Почему document.onload не выполняется?

Если посмотреть на обьект window и на обьект document через консоль можно увидить что у них есть событие onload, решил попробовать их в действии.
html
<html>
  <head>
    <script src="testjs.js"></script>
  </head>
  <body>
    some text
    <div id="test">test</div>
  </body>
</html>


js
console.log(document)
console.log(document.getElementById('test'));

window.onload = function() {
  console.log(document)
  console.log(document.getElementById('test'));
}

document.onload = function() {
  console.log(document)
  console.log(document.getElementById('test'));
}


консоль
RkFp2FNORKo.jpg

после того как видно результат в консоли у меня возникают такие вопросы:
1. Почему если в первой строчке в обьекте документа в теге body есть дочерний div, то во второй строчке возвращаеться null?? я ожидал что в первой строчке не будет дочернего div и во второй будет null, но почему то обьект document вывело c дочерним div, почему???
2. разница в window.onload и document.onload я полагаю в том что, window.onload - выполняется когда простроен dom и загружены все нужные ресурсы, а document.onload - только после построяки dom, если у меня на второй строчке не был найден div, то именно в тот момент dom не был построен, значит событие должно было сработать позже, почему не сработало???
  • Вопрос задан
  • 6392 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
document.onload срабатывает когда DOM загружен.
window.onload срабатывает когда DOM, картинки и стили загружены. Типа. Потому что есть разница в браузерах.

Если хотите выполнить скрипт после загрузки всего контента лучше использовать DOMContentLoaded

document.addEventListener('DOMContentLoaded', function(){
    // ... code here
})
Ответ написан
8 комментариев
8 комментариев
Dier_Sergio_Great
@Dier_Sergio_Great
Увлеченный человек
Вот правильный ответ:
window.addEventListener("load", function() {
  console.log(document)
});

Суть в том что если писать так
window.onload = function() {
  console.log(document)
}

то такой вызов переопределяет значения ранее присвоенному событию. Т.е. на это событие нельзя повесить несколько обработчиков. Каждое новый обработчик будет переопределять предыдущее.
Именно поэтому у Вас оно не работало!
Надо делать только таким способом.
А все эти грамотеи которые тут советы давали, их советы не имеют силы так как они не в курсе что событие переопределяется при присвоении.
А ведь задача ведь стоит не просто вызвать функцию при загрузке сайта, а вызвать при загрузке всех ресурсов.
Например вызвать AJAX запрос. Какой смысл вызывать AJAX если картинки не прогрузились. Да и вообще тормозить загрузку отображения сайта не нужно без явной причины.
Например комментарии внизу прогрузить, или подгрузить всплывающие подсказки.
Грамотеи даже не спросили у Вас, какая зависимость Вашего скрипта, и является ли критичным ожидание загрузки всех ресурсов сайта. 
document.addEventListener('DOMContentLoaded', function() {
} );

Такой способ тупо будет задерживать отображение сайта.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправление ошибок в работе вебсайта / Доработка интернет-магазина
24 апр. 2024, в 02:51
50000 руб./за проект
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Ещё заказы