custom - onchange javascript
window.onload vs document.onload (8)
¿Qué es más ampliamente compatible: window.onload o document.onload ?
window.onload
¿Cuándo se disparan?
- De forma predeterminada, se activa cuando se carga toda la página, incluido su contenido (imágenes, css, scripts, etc.)
- En algunos navegadores, ahora asume la función de document.onload y se activa cuando el DOM también está listo.
document.onload
- Se llama cuando el DOM está listo, lo que puede ser anterior a la carga de imágenes y otro contenido externo.
¿Qué tan bien son apoyados?
window.onload parece ser el más soportado. De hecho, algunos de los navegadores más modernos en cierto sentido han reemplazado document.onload con window.onload. Los problemas de soporte del navegador son probablemente la razón por la que muchas personas están comenzando a usar bibliotecas como jQuery para manejar la verificación del documento, así:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
A los efectos de la historia:
window.onload vs body.onload
Como nota, se hizo una pregunta similar en los codingforums de codingforums un tiempo sobre el uso de window.onload over body.onload . El resultado parece ser que debes usar window.onload porque es bueno separar tu estructura de la acción.
De acuerdo con los documentos HTML de análisis - El final ,
El navegador analiza la fuente HTML y ejecuta scripts diferidos.
Se
DOMContentLoadedunDOMContentLoadeden eldocumentcuando todo el HTML se ha analizado y se ha ejecutado. El evento burbujea hasta lawindow.El navegador carga recursos (como imágenes) que retrasan el evento de carga.
Se envía un evento de
loaden lawindow.
Por lo tanto, el orden de ejecución será
-
DOMContentLoadedescuchas de eventos dewindowen la fase de captura -
DOMContentLoadedoyentes de evento dedocument -
DOMContentLoadedescuchas de eventos dewindowen la fase de burbuja -
loaddetectores de eventos (incluido el controlador de eventosonload) de lawindow
Nunca se debe invocar un detector de eventos de load burbujas (incluido el controlador de eventos onload ) en el document . Solo se pueden invocar escuchas de load captura, pero debido a la carga de un sub-recurso como una hoja de estilo, no debido a la carga del documento en sí.
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
};
En Chrome, window.onload es diferente de <body onload=""> , mientras que son iguales tanto en Firefox (versión 35.0) como en IE (versión 11).
Podrías explorar eso con el siguiente fragmento de código:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>
Y verá tanto "ventana cargada" (que viene primero) como "cuerpo onload" en la consola de Chrome. Sin embargo, solo verás "body onload" en Firefox e IE. Si ejecuta " window.onload.toString() " en las consolas de IE & FF, verá:
"function onload (event) {bodyOnloadHandler ()}"
lo que significa que la asignación "window.onload = function (e) ..." se sobrescribe.
La idea general es que window.onload se activa cuando la ventana del documento está lista para la presentación y document.onload se activa cuando se completa el árbol DOM (creado a partir del código de marcado dentro del documento).
Lo ideal es que, al suscribirse a los eventos del árbol DOM , se puedan realizar manipulaciones fuera de la pantalla a través de Javascript, sin incurrir en casi ninguna carga de CPU . Por el contrario, window.onload puede tardar un poco en activarse , cuando aún deben solicitarse, analizarse y cargarse múltiples recursos externos.
Escenario de prueba:
Para observar la diferencia y cómo su navegador de elección implementa los controladores de eventos mencionados anteriormente, simplemente inserte el siguiente código dentro de la etiqueta - <body> - de su 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>
â–ºResultar:
Aquí está el comportamiento resultante, observable para Chrome v20 (y probablemente los navegadores más actuales).
- No hay evento
document.onload. -
onloaddispara dos veces cuando se declara dentro de<body>, una vez cuando se declara dentro de<head>(donde el evento actúa comodocument.onload). - el conteo y la acción dependiente del estado del contador permiten emular ambos comportamientos de eventos.
- Alternativamente, declare el controlador de eventos
window.onloaddentro de los límites del elemento HTML-<head>.
â–ºProyecto de ejemplo:
El código anterior se toma de la base de código de este proyecto ( index.html y keyboarder.js ).
Para obtener una lista de los controladores de eventos del objeto de la ventana , consulte la documentación de MDN.
Sin embargo, Window.onload es el estándar: el navegador web en la PS3 (basado en Netfront) no es compatible con el objeto de la ventana, por lo que no puede usarlo allí.
window.onload sin embargo, a menudo son la misma cosa. De forma similar, body.onload se convierte en window.onload en IE.
window.onload y onunload son accesos directos a document.body.onload y document.body.onunload
document.onload y onload handler en todas las etiquetas html parecen estar reservados, sin embargo, nunca se activan
'' onload '' en el documento -> verdadero
Añadir escucha de eventos
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
Update March 2017
1 Vanilla JavaScript
window.addEventListener(''load'', function() {
console.log(''All assets are loaded'')
})
2 jQuery
$(window).on(''load'', function() {
console.log(''All assets are loaded'')
})
Buena suerte.