Los eventos del ciclo de vida de una página HTML son disparadores del navegador (DOMContentLoaded, load, beforeunload y unload) que indican los diferentes estados de carga y descarga del documento y sus recursos externos, permitiendo ejecutar código JavaScript en el momento preciso para inicializar aplicaciones o gestionar el cierre de sesión.
¿Conoces los eventos del ciclo de vida de una página HTML? Los eventos son un concepto que nos permite conocer cuándo se dan ciertos momentos en nuestro proyecto, ya sean momentos en la interacción de usuario (por ejemplo, clic) o momentos en la construcción de nuestro proyecto.
Si buscas especializarte en desarrollo frontend y manipulación del DOM mediante un bootcamp de tecnología intensivo, dominar el flujo de carga y descarga te permitirá construir interfaces reactivas y eficientes.
En este post, te enseñaremos cuáles son los eventos ciclo de vida de una página HTML, fundamentales para conocer los momentos de carga de nuestro proyecto web.
¿Cuáles son los eventos ciclo de vida de una página HTML?
Los eventos ciclo de vida de una página HTML son aquellos que nos permiten conocer los momentos en los que se cargan o descargan ciertos datos de nuestro documento HTML. Este conocimiento es fundamental para preparar reacciones desde nuestro código JavaScript según los tiempos de carga de un usuario.
Los eventos ciclo de vida de una página HTML, como todo evento, pueden pasarse como primer parámetro del método addEventListener, que recibe como segundo parámetro un callback con la reacción a ejecutar una vez suceda dicho evento.
Existen cuatro eventos principales en el ciclo de vida. A continuación te explicamos cuáles son y cómo funcionan:
«Entender el funcionamiento del navegador, los eventos del DOM y el desarrollo con JavaScript fue el punto de inflexión para cambiar mi rumbo profesional.»
Conoce la historia real de nuestros estudiantes que, partiendo desde cero, aprendieron a construir aplicaciones interactivas y se integraron con éxito en el sector IT.
👉 Lee este caso de éxito completo sobre reinvención a desarrollador aquí
DOMContentLoaded
El evento DOMContentLoaded se dispara cuando el navegador ha parseado completamente el documento HTML y el árbol del DOM está totalmente construido. Sin embargo, en este evento, los recursos externos como imágenes, hojas de estilo o submarcos (iframes) no se han cargado completamente. Es el momento idóneo para adjuntar escuchadores de eventos o inicializar la lógica de la interfaz.
load
Cuando se dispara el evento load, significa que no solamente el documento HTML de nuestro proyecto está cargado, sino también lo están todos los recursos externos (imágenes, fuentes, estilos). En este orden de ideas, el evento load sucede siempre después del evento DOMContentLoaded.
beforeunload y unload
Estos dos eventos ciclo de vida de una página HTML nos permiten conocer el momento en el que el usuario sale de la página:
- beforeunload: Se dispara cuando el usuario intenta abandonar la página (cerrando la pestaña, recargando o navegando a otra URL). Permite confirmar si el usuario realmente desea salir (por ejemplo, si tiene cambios sin guardar en un formulario).
- unload: Se dispara cuando el usuario ya se ha ido o el documento se está destruyendo. Permite ejecutar algunas pocas operaciones finales, como enviar métricas de analítica o limpiar recursos.
| Evento | Momento de Disparo | Estado de Recursos Externos |
|---|---|---|
| DOMContentLoaded | HTML parseado y DOM construido. | Aún no cargados (imágenes, CSS, etc.). |
| load | Página y todos los recursos finalizados. | 100% cargados. |
| beforeunload / unload | Navegación fuera de la página / Cierre. | Proceso de descarga de la sesión. |
Ahora que conoces los eventos ciclo de vida de una página HTML, ¡te invitamos a seguir aprendiendo sobre la relación entre HTML, el DOM y JavaScript!
Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás, entre muchas cosas, cómo desarrollar con HTML5, CSS3, JavaScript, React y Node.js, tecnologías fundamentales para el desarrollo frontend y backend profesional. ¡Pide información y cambia tu vida!
Conclusión
Comprender los eventos del ciclo de vida de una página HTML permite optimizar el tiempo de ejecución de tus scripts en JavaScript, garantizando que el DOM esté disponible antes de manipularlo o que los recursos críticos se hayan renderizado correctamente. Asimilar estos conceptos del navegador es una competencia fundamental para construir aplicaciones web interactivas y de alto rendimiento.
Si quieres aprender desarrollo web desde los fundamentos de HTML5, CSS3 y JavaScript hasta frameworks modernos como React y arquitecturas backend profesionales, descubre el Desarrollo Web Full Stack Bootcamp de KeepCoding e impulsa tu carrera tecnológica hoy mismo.
Para profundizar en los eventos del ciclo de vida del documento y ejemplos de implementación con addEventListener, te sugerimos revisar la documentación oficial de MDN Web Docs sobre DOMContentLoaded.
Preguntas Frecuentes sobre Tipos de Variables y Datos Categóricos
¿Cuáles son los 4 tipos de variables?
En estadística y ciencia de datos, las variables se dividen principalmente en 4 tipos según su escala de medida: 1. Cualitativa nominal, 2. Cualitativa ordinal, 3. Cuantitativa discreta y 4. Cuantitativa continua.
¿Qué son variables continuas y categóricas?
Las variables categóricas (o cualitativas) representan atributos, grupos o etiquetas sin valor numérico inherente (como el género o el color), mientras que las variables continuas son numéricas y pueden tomar un número infinito de valores dentro de un rango (como la altura o el peso).
¿Qué es una variable cualitativa o categórica?
Es aquel tipo de variable que describe cualidades, categorías o atributos no numéricos de un elemento o individuo, permitiendo clasificar los datos en diferentes grupos.
¿Cuáles son los datos categóricos?
Los datos categóricos son valores que dividen la información en grupos específicos o etiquetas. Se clasifican en nominales (sin un orden intrínseco, como ‘país de origen’) y ordinales (con una jerarquía u orden establecido, como ‘nivel educativo’).
¿Qué es una variable categórica y ejemplos?
Una variable categórica asigna un individuo o caso a una categoría definida. Ejemplos incluyen: estado civil (soltero, casado), nivel de satisfacción (bajo, medio, alto) o tipo de sistema operativo (Windows, macOS, Linux).
¿Cuáles son los 4 tipos de datos?
En análisis de datos y estadística, los 4 niveles o tipos de datos más comunes son: Nominales, Ordinales, de Intervalo y de Razón.
