Javascript – #4.01. Modelo de eventos en línea

Lección
Materiales

Antes de empezar a hablar de modelos de eventos, conviene saber qué es un evento.

En la programación tradicional, los programas se ejecutan siguiendo una secuencia de instrucciones que van de arriba a abajo. No obstante, actualmente es posible trabajar con la programación basada en eventos, de manera que ciertas instrucciones se ejecutan en el momento que ocurre algo: un evento.

Javascript admite los dos tipos de métodos de programación. Hasta ahora habíamos trabajado la programación tradicional; ahora nos adentraremos en el mundo de los eventos.

Hay muchos tipos de eventos en Javascript, normalmente asociados a las acciones que realiza un usuario mientras interactúa con el ordenador mediante el ratón o el teclado; aunque hay otros eventos que se ejecutan automáticamente, como el evento «onload», que sucede cuando termina de cargarse una página web. Podéis ver un listado con todos los eventos en Mozilla MDN Web Docs.

En esta lección vamos a ver el modelo de eventos en línea, o también conocido como eventos en atributos HTML. Es el modo más sencillo y menos profesional o recomendado de indicar qué código debe ejecutarse cuando se produzca un evento; dicho código se asocia a un atributo del elemento HTML.

Edu Recuerda

¡Recuerda! El modelo de eventos en línea no se debe utilizar porque implica mezclar código HTML con Javascript, práctica que no es muy recomendable… ¡evítalo!

Un ejemplo sería el siguiente, en que se muestra una ventana de diálogo al pulsar un botón:

<input type="button" value="¡Haz clic sobre mí!" onclick="alert('¡Hola, caracola!');" />

Veamos cómo funciona este modelo de eventos con varios ejemplos, entre ellos el extensamente utilizado «onload» en la etiqueta <body>. ¡Pero recuerda, este no es el método más recomendable!

Javascript – #4.01. Modelo de eventos en línea

¡Consulta en la pestaña Materiales el código fuente trabajado en la lección!

¿No te ha quedado claro? ¿Quieres aportar tu punto de vista? ¡Deja tu comentario!

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!