Eventos ciclo de vida de una página HTML

Autor: | Última modificación: 18 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Conoces los eventos 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 ejempli, clic) o momentos en la construcción de nuestro proyecto. 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 ciclo de vida de una página HTML. A continuación te explicamos cuáles son y cómo funcionan.

DOMContentLoaded

El evento DOMContentLoaded se dispara cuando el browser o navegador está totalmente cargado y el DOM está construido. Sin embargo, en este evento, los recursos externos no se han cargado. Si quieres conocer un ejemplo práctico del uso de DOMContentLoaded, te invitamos a leer nuestro post sobre cómo asegurar que un elemento esté en el DOM.

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. En este orden de ideas, el evento load sucede 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. Mientras que el evento beforeunload se dispara cuando el usuario quiere salir para confirmar si realmente quiere hacerlo, el evento unload se dispara cuando el usuario se ha ido, lo que nos permite ejecutar algunas pocas operaciones.

Para conocer más sobre los eventos ciclo de vida de una página HTML, te recomendamos leer el artículo DOMContentLoaded, load, beforeunload, unload en javascript.info.

¿Qué sigue?

Ahora que conoces los eventos ciclo de vida de una página HTML, ¡te invitamos a seguir aprendiendo sobre la relación entre HTML 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 HTML, CSS y JavaScript, lenguajes fundamentales para el proceso frontend. ¡Pide información y cambia tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!