window.onload против document.onload

<p>что более широко поддерживается: <code>window.onload</code> или <code>document.onload</code>?</p>

<h2>window.onload</h2><p><strong> когда они стреляют? </strong></p><p> <a href="https://developer.mozilla.org/en-us/docs/web/api/globaleventhandlers.onload">window.onload</a> </p><ul> <li>по умолчанию он запускается при загрузке всей страницы, включая ее содержимое (изображения, css, скрипты и т.д.)</li> <li>в некоторых браузерах он теперь берет на себя роль document.onload и запускается, когда dom также готов.</li> </ul><p>document.onload</p><ul> <li>он вызывается, когда dom готов, что может быть до загрузки изображений и другого внешнего контента.</li> </ul><p><strong> насколько хорошо они поддерживаются? </strong></p><p>window.onload наиболее широко поддерживается. фактически, некоторые из самых современных браузеров в некотором смысле заменили document.onload на window.onload. проблемы с поддержкой браузера, скорее всего, являются причиной того, что многие люди начинают использовать библиотеки, такие как <a href="http://jquery.com/">jquery</a> , для обработки проверки готовности документа следующим образом:</p><pre><code>$(document).ready(function() { / code here / }); $(function() { /* code here */ }); </code></pre><hr><p>в целях истории:</p><p><strong> window.onload против body.onload </strong></p><p>в качестве примечания, аналогичный вопрос был задан на <a href="http://www.codingforums.com/archive/index.php/t-106229.html">codingforums</a> некоторое время назад относительно использования <code>window.onload</code> over <code>body.onload</code>. в результате вы должны использовать <strong> window.onload </strong>, потому что хорошо отделить вашу структуру от действия.</p>

<p>согласно <a href="https://www.w3.org/tr/html5/syntax.html#the-end">разбор html-документов - конец</a> ,</p><ol> <li> <p>браузер анализирует исходный код html и запускает отложенные сценарии.</p> </li> <li> <p><code>domcontentloaded</code> отправляется в <code>document</code>, когда весь html был проанализирован и запущен. событие переходит в <code>window</code>.</p> </li> <li> <p>браузер загружает ресурсы (например, изображения), которые задерживают событие загрузки.</p> </li> <li> <p>событие <code>load</code> отправляется в <code>window</code>.</p> </li> </ol><p>следовательно, порядок исполнения будет</p><ol> <li><code>domcontentloaded</code> прослушиватели событий <code>window</code> на этапе захвата</li> <li><code>domcontentloaded</code> слушатели событий <code>document</code></li> <li><code>domcontentloaded</code> слушатели событий <code>window</code> в фазе пузыря</li> <li><code>load</code> прослушиватели событий (включая <code>onload</code> обработчик событий) <code>window</code></li> </ol><p><strong> слушатель события <code>load</code> пузыря (включая обработчик события <code>onload</code>) в <code>document</code> никогда не должен вызываться. </strong> может быть вызван только захват прослушивателей <code>load</code>, но из-за загрузки подресурс, такой как таблица стилей, не из-за загрузки самого документа.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addeventlistener('domcontentloaded', function() { console.log('window - domcontentloaded - capture'); // 1st }, true); document.addeventlistener('domcontentloaded', function() { console.log('document - domcontentloaded - capture'); // 2nd }, true); document.addeventlistener('domcontentloaded', function() { console.log('document - domcontentloaded - bubble'); // 2nd }); window.addeventlistener('domcontentloaded', function() { console.log('window - domcontentloaded - bubble'); // 3rd }); window.addeventlistener('load', function() { console.log('window - load - capture'); // 4th }, true); document.addeventlistener('load', function(e) { /* filter out load events not related to the document */ if(['style','script'].indexof(e.target.tagname.tolowercase()) < 0) console.log('document - load - capture'); // does not happen }, true); document.addeventlistener('load', function() { console.log('document - load - bubble'); // does not happen }); window.addeventlistener('load', function() { console.log('window - load - bubble'); // 4th }); window.onload = function() { console.log('window - onload'); // 4th }; document.onload = function() { console.log('document - onload'); // does not happen };</code></pre></div> </div>

<p><code>window.onload</code> и <code>onunload</code> являются ярлыками для <code>document.body.onload</code> и <code>document.body.onunload</code></p><p>обработчик <code>document.onload</code> и <code>onload</code> для всех тегов html, похоже, зарезервирован, но никогда не запускается</p><p>'<code>onload</code>' в документе -> true</p>

<p>window.onload, однако, они часто одно и то же. подобным образом body.onload становится window.onload в ie.</p>

<p>однако window.onload является стандартом - веб-браузер в ps3 (на основе netfront) не поддерживает объект окна, поэтому вы не можете использовать его там.</p>