¿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.
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!
