En este artículo vamos a explicar las diferencias que existen entre window y document cuando los utilizamos junto con JavaScript. Aunque window y document suelen usarse de manera similar para gestionar eventos en toda la página, existen diferencias clave entre ambos.
Cuándo usar window
Cuando usamos window en JavaScript, representa la totalidad de la ventana del navegador. Window es el objeto global en el que se ejecuta el código JavaScript del navegador. Contiene información sobre el navegador, la URL actual, el historial o el tamaño de la ventana, entre otros.
Los eventos JavaScript asignados a window afectan a toda la ventana, incluso si el document aún no se ha cargado completamente. Por ejemplo, observa el siguiente código:
window.addEventListener("resize", () => { console.log("La ventana ha cambiado de tamaño");
});Este código JavaScript captura cambios en el tamaño de la ventana (window), algo que document no haría. Cada vez que el usuario cambie el tamaño de la ventana del navegador se ejecutará el código.
Cuándo usar document
Cuando usamos document en JavaScript, representa el contenido de la página (DOM). Document contiene la estructura del HTML cargado en la página. Se usa para manipular elementos del (DOM) y capturar eventos del usuario dentro del contenido.
Los eventos JavaScript asignados a document no tiene control sobre aspectos de la ventana (window), solo sobre los elementos HTML. Por ejemplo, observa el siguiente código:
document.addEventListener("click", () => { console.log("Se hizo clic en algún lugar del documento");
});Este código JavaScript captura el evento «clic» sobre el documento (document), no sobre la ventana (window), pero esto solo funciona si el documento ya ha sido cargado en su totalidad.
¿Cuándo usar window o document?
Para tener claro cuándo utilizar window o document podemos visualizarlo en la siguiente tabla comparativa:
| Caso | Usar window | Usar document |
|---|---|---|
| Detectar cambio de tamaño de la ventana | ✅ | ❌ |
Capturar errores globales (error, unhandledrejection) | ✅ | ❌ |
| Capturar eventos del teclado en toda la ventana | ✅ | ❌ |
| Capturar eventos de mouse dentro del contenido HTML | ❌ | ✅ |
| Detectar cuando el DOM está completamente cargado | ❌ | ✅ |
Window y document en JavaScript
En JavaScript, usar window o document indistintamente suele resultar común en muchos casos, sin embargo tener en cuenta sus pequeñas sutilezas puede hacer que nuestro código sea más eficiente y evitarnos algunos errores. Sobretodo en eventos que necesitan cargar todo el DOM completamente. En general, podemos resumir las diferencias entre window y document de la siguiente manera:
- Usa window para eventos relacionados con la ventana del navegador.
- Usa document para eventos relacionados con los elementos de la página.
De modo que si necesitas un evento global pero solo dentro del DOM, usa document. Si necesitas un evento que afecte a la ventana en general, usa window.
¡ Espero que este artículo sea de vuestro interés !