La idea general es que window.onload fires cuando la ventana del documento es listo para la presentación y document.onload fires cuando el Árbol DOM (construido a partir del código de marcado dentro del documento) es terminado.
Idealmente, suscribirse a Eventos de árbol DOM, permite manipulaciones fuera de la pantalla a través de Javascript, incurriendo en casi sin carga de CPU. Contrariamente window.onload pueden toma un tiempo para disparar, cuando aún no se han solicitado, analizado y cargado varios recursos externos.
►Escenario de prueba:
Para observar la diferencia y como tu navegador de elección implementos lo antes mencionado controladores de eventos, simplemente inserte el siguiente código dentro de su documento – <body>– etiqueta.
<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:
Aquí está el comportamiento resultante, observable para Chrome v20 (y probablemente la mayoría de los navegadores actuales).
- No
document.onloadevento. onloaddispara dos veces cuando se declara dentro del<body>, una vez cuando se declara dentro del<head>(donde el evento luego actúa comodocument.onload).- contar y actuar en función del estado del contador permite emular ambos comportamientos de eventos.
- Alternativamente declare el
window.onloadcontrolador de eventos dentro de los confines del HTML-<head>elemento.
►Ejemplo de proyecto:
El código anterior está tomado de este proyecto base de códigoindex.html y keyboarder.js).
Para obtener una lista de controladores de eventos del objeto de ventana, consulte la documentación de MDN.
