Conceptos de DHTML

Para ver como capturamos el evento load confeccionaremos el problema que ya habíamos realizado con el modelo antiguo de eventos.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p>Este sitio utiliza el modelo de eventos propuestos por el W3C.</p>
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

window.addEventListener('load', () => {
    alert("Bienvenido a este sitio.")
})

Recordemos que nuestro archivo HTML está libre de JavaScript (de todos modos no debemos olvidarnos de disponer la marca script para importar el archivo js al final de la página, previo a cerrar el body)

La primer línea de nuestro archivo JavaScript llamamos al método addEventListener del objeto window:

window.addEventListener('load', () => {
    alert("Bienvenido a este sitio.")
})

Al método addEventListenes le pasamos el nombre del evento que queremos capturar ('load') y la implementación de la función que queremos que se ejecute (en nuestro caso implementamos una función flecha)

35 - Evento load y unload (DOM)

Retornar