A idéia geral é que window.onload seja acionado quando a janela do documento estiver pronta para apresentação e document.onload for acionado quando a árvore DOM (criada a partir do código de marcação no documento) for concluída .
Idealmente, a inscrição em eventos na árvore DOM permite manipulações fora da tela por meio de Javascript, incorrendo em quase nenhuma carga da CPU . Por outro lado, window.onload
pode demorar um pouco para disparar , quando vários recursos externos ainda precisam ser solicitados, analisados e carregados.
► Cenário de teste:
Para observar a diferença e como o navegador escolhido implementa os manipuladores de eventos mencionados acima , basta inserir o seguinte código na <body>
tag - - do documento .
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►Resultado:
Aqui está o comportamento resultante, observável no Chrome v20 (e provavelmente nos navegadores mais atuais).
- Nenhum
document.onload
evento.
onload
dispara duas vezes quando declarado dentro de <body>
, uma vez quando declarado dentro de <head>
(onde o evento atua como document.onload
).
- contar e agir de acordo com o estado do contador permite emular os dois comportamentos de eventos.
- Como alternativa, declare o
window.onload
manipulador de eventos dentro dos limites do <head>
elemento HTML .
►Exemplo do projeto:
O código acima é retirado da base de código deste projeto ( index.html
e keyboarder.js
).
Para obter uma lista dos manipuladores de eventos do objeto window , consulte a documentação do MDN.
window
eventos:onload
eDOMContentLoaded
. Exemplo de uso :,window.addEventListener('DOMContentLoaded', callback)
. A partir de meados de 2019, compatível com todos os principais navegadores. ----- developer.mozilla.org/en-US/docs/Web/API/Window/… ------ developer.mozilla.org/en-US/docs/Web/API/Window/load_event