Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

El modelo de eventos
de JavaScript

Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007
El modelo de eventos de JavaScript

JavaScript, además de ser un lenguaje basado en

objetos, es también un lenguaje de programación
conducido por eventos.
Los guiones JavaScript de los archivos de páginas web
se pueden ejecutar de dos formas:
 Durante la interpretación del código de la página,
a medida que se van encontrando las instrucciones
ejecutables (incluyendo posiblemente invocaciones de
funciones).
 Al producirse determinados eventos para los que se han
previsto acciones concretas (guión de código asociado).
Ya hemos visto ejemplos del primer método y alguno
del segundo. Vamos a analizar con detenimiento este
segundo método de ejecución de código.

El modelo de eventos de JavaScript Página 2 - 2

Eventos y manejadores de eventos

Un evento es una señal que se dispara al producirse

algún cambio.
Los eventos son provocados la mayor parte de las veces por
las acciones del usuario (a medida que maneja el ratón o el
teclado), aunque también pueden ser provocados por otros
tipos de cambios en el entorno, como los que ocurren
durante el procesamiento (fin de la carga del documento,
abandono de la página).
Cuando surge un evento se ejecuta automáticamente
el guión del correspondiente manejador de evento;
cada evento tiene asociado un manejador.
Por defecto los manejadores de eventos no tienen
guiones asociados, de forma que no se hace nada
cuando se producen. Somos nosotros los que tenemos
que asociar guiones a los manejadores de los eventos
que queramos controlar.

El modelo de eventos de JavaScript Página 2 - 3

Eventos estándar

Aplicaciones portables: ajustarse a lo estándar.

Los eventos estándar principales de JavaScript 1.2 son:
(Se indican sus identificadores y están clasificados.)

Eventos de ratón
Click: el usuario ha pulsado sobre un objeto.
DblClick: el usuario ha pulsado dos veces sobre
un objeto.
MouseDown: el usuario ha presionado un pulsador
del ratón.
MouseOut: el puntero del ratón deja de estar sobre
un objeto.
MouseOver: el puntero del ratón empieza a estar sobre
un objeto.
MouseUp: el usuario ha liberado el pulsador del ratón.

El modelo de eventos de JavaScript Página 2 - 4

Eventos estándar

Eventos de teclado
KeyDown: el usuario acaba de pulsar una tecla.
KeyPress: el usuario está pulsando una tecla.
KeyUp: el usuario acaba de liberar (soltar) la tecla.

Eventos de ventana
Move: el usuario ha desplazado la ventana.
Resize: el usuario ha cambiado el tamaño de la ventana.

Eventos de enfoque
Blur: el elemento pierde el foco.
Focus: el elemento gana el foco.

Los manejadores se llaman igual, pero añadiendo

el prefijo "on" delante (onBlur, onKeyPress).

El modelo de eventos de JavaScript Página 2 - 5

Eventos estándar

Eventos de formulario
Change: el control de formulario pierde el foco y
ha cambiado.
Reset: el usuario restaura el formulario pulsando
el botón Reset (Restablecer).
Select: el usuario ha seleccionado algo en el cuadro
de texto.
Submit: el usuario remite el formulario pulsando
el botón Submit (Enviar).

Eventos de carga
Abort: el usuario ha interrumpido la carga del documento
mientras se cargaba esta imagen.
Error: se ha producido un error durante la carga.
Load: se ha terminado la carga del documento.
Unload: el usuario abandona el documento.

El modelo de eventos de JavaScript Página 2 - 6

Eventos y objetos

Cada evento se dispara cuando se da la condición

asociada y se produce sobre un determinado objeto.
Por ejemplo, un determinado control de un formulario
gana el foco o el usuario pulsa sobre un botón.
Los componentes de la página web están descritos en
su archivo como elementos HTML.
La mayoría de los elementos HTML tienen asociado un
objeto JavaScript durante la visualización de la página.
Para que el objeto de un elemento HTML reaccione
a un determinado evento que se produzca sobre él,
hay que asociar al correspondiente manejador el guión
adecuado. Esto se hace asignando el código, como
cadena de caracteres, al atributo del elemento HTML
que representa al evento en cuestión.

El modelo de eventos de JavaScript Página 2 - 7

Eventos y objetos
Por ejemplo, supongamos que queremos asegurarnos
de que el usuario introduce información en un campo
de un formulario.
Primero debemos asegurarnos de que el campo de texto
gane el foco tan pronto se haya cargado la página.
Luego, debemos comprobar si el campo contiene algo
cuando el control pierda el foco (lo que ocurrirá cuando
se pulse fuera del control; el botón Enviar, por ejemplo).
Si el campo de texto está vacío mostramos un cuadro
de alerta y volveremos a poner el foco en el control.
Todo lo anterior tiene su correspondencia en forma de
eventos que se producen durante la interacción.
Cuando se termina de cargar la página el objeto
document detecta un evento Load; el elemento HTML
que genera el objeto document es el elemento BODY.
El modelo de eventos de JavaScript Página 2 - 8
Eventos y objetos

Para reaccionar al evento Load hay que asociar

un código a su manejador, asignar una cadena con
el código al atributo onLoad del elemento BODY:
<BODY onLoad="...">
Lo que queremos que se haga cuando se termine de
cargar la página es que se ponga el foco en el control.
El control siempre se encuentra dentro de un
formulario. Al objeto del control hay que accederlo
a través del objeto del formulario.
En JavaScript accedemos a los objetos por medio de
los nombres establecidos para los elementos HTML.
Por tanto, debemos dar nombre al formulario (por
ejemplo, Formulario) y al control (por ejemplo, Nombre).
<BODY onLoad="Formulario.Nombre.focus()">

El modelo de eventos de JavaScript Página 2 - 9

Eventos y objetos

Cuando se quita el foco de un control el objeto del

control detecta un evento Blur.
Para reaccionar al evento Blur hay que asociar un
código a su manejador, asignar una cadena con el
código al atributo onBlur del elemento del control:
<INPUT NAME="Nombre" TYPE="text" onBlur="...">
Lo que queremos que se haga cuando el cuadro de
texto pierda el foco es comprobar si se ha introducido
algo y si no fuera así mostrar una alerta y volver a
poner el foco en el control:
<INPUT NAME="Nombre" TYPE="text"
onBlur="if(this.value=='') { alert('Debe
introducir un nombre'); this.focus() }">
this se refiere al objeto actual (el control aquí).

El modelo de eventos de JavaScript Página 2 - 10

Eventos y objetos

<HTML> JS15.html
<HEAD><TITLE>Eventos</TITLE>
</HEAD>
<BODY onLoad="documento.frm.Nombre.focus()">
<FORM NAME="frm"
ACTION="mailto:luis@sip.ucm.es?
subject=Respuesta de formulario" METHOD="post"
ENCTYPE="text/plain">
Nombre: <INPUT NAME="Nombre" TYPE="text"
onBlur="if(this.value=='') { alert('Debe
introducir un nombre');
this.focus() }"><BR><BR>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
El modelo de eventos de JavaScript Página 2 - 11
Eventos y objetos

El modelo de eventos de JavaScript Página 2 - 12

Eventos y objetos

Cada clase de objetos se ve afectada por determinados

eventos (contempla unos determinados eventos).
Para ciertas clases de objetos no son relevantes
algunos eventos (no se pueden producir sobre ellos).
El evento onSubmit se produce sobre un objeto Form,
pero no afecta a otras clases de objetos como Text
(controles de cuadro de texto) o Document (BODY).
Sólo podemos asociar guiones a manejadores de
eventos que sean relevantes para la clase de objetos.
Y, por supuesto, también hay eventos que afectan a
varias clases de objetos.

¿Qué ocurre entonces si asociamos guiones a los mismos

manejadores de evento de varias clases de objetos?

El modelo de eventos de JavaScript Página 2 - 13

Propagación de eventos

Cada evento se produce sobre un objeto. Si se ha

asociado un guión al manejador correspondiente,
entonces se ejecuta el guión al producirse el evento.
Ése es el objeto que detecta el evento. Casi siempre
el objeto está contenido dentro de otro: tras ejecutar
el manejador se notifica el evento al objeto padre.
Los eventos se van propagando hacia arriba por
la jerarquía de contenidos y todos los objetos
antecesores tienen la posibilidad de responder al
evento (siempre que sea relevante).
Una vez que el objeto window ha afrontado la situación
el proceso termina.
Así, sobre la jerarquía de contenido de objetos se
encuentra una jerarquía de manejadores de eventos.

El modelo de eventos de JavaScript Página 2 - 14

Propagación de eventos

Tomemos como punto de partida esta página:

<HTML>
<HEAD>
<TITLE>Eventos</TITLE>
</HEAD>
<BODY>
<P>Pulsa sobre cualquier sitio que quieras.
</P>
<P>Aquí hay un párrafo que contiene
<B>algo de texto en negrita y
<I>algo de texto en cursiva también.
</I>
</B>
</P>
</BODY>
</HTML>
El modelo de eventos de JavaScript Página 2 - 15
Propagación de eventos

Los objetos están contenidos unos en otros.

El objeto del elemento BODY contiene:
El objeto del primer elemento P.
El objeto del segundo elemento P que a su vez
contiene:
El objeto del elemento B que a su vez contiene:
El objeto del elemento I.
Vamos a ver cómo se propaga el evento Click.
Para ello vamos a adjuntar código a todos los
manejadores de evento onClick; los guiones
indicarán sobre qué elementos se ha pulsado.

El modelo de eventos de JavaScript Página 2 - 16

Propagación de eventos

<HTML> JS16.html
<HEAD>
<TITLE>Eventos</TITLE>
</HEAD>
<BODY onClick="alert('Sobre el cuerpo')">
<P onClick="alert('Sobre el primer párrafo')">
Pulsa sobre cualquier sitio que quieras.</P>
<P onClick="alert('Sobre el segundo párrafo')">
Aquí hay un párrafo que contiene
<B onClick="alert('Sobre la negrita')">
algo de texto en negrita y
<I onClick="alert('Sobre la cursiva')">
algo de texto en cursiva también.</I></B></P>
</BODY>
</HTML>

El modelo de eventos de JavaScript Página 2 - 17

Propagación de eventos

click

click

El modelo de eventos de JavaScript Página 2 - 18

Propagación de eventos

El modelo de eventos de JavaScript Página 2 - 19

Eventos de ratón: DblClick

<HTML> JS18.html
<HEAD>
<TITLE>Eventos de ratón</TITLE>
</HEAD>
<BODY>
<FORM>
Escriba texto y pulse dos veces sobre él para
convertirlo a mayúsculas:<BR><BR>
<TEXTAREA COLS="20" ROWS="3"
onDblClick="this.value=this.value.toUpperCase()">
Introduzca aquí algún texto
</TEXTAREA>
</FORM>
</BODY>
</HTML>

El modelo de eventos de JavaScript Página 2 - 20

Eventos de ratón: DblClick

Doble pulsación

El modelo de eventos de JavaScript Página 2 - 21

Eventos de ratón: imágenes de sustitución

Con los eventos MouseOver y MouseOut se crea

el efecto dinámico de imágenes de sustitución:
<HTML>
JS19.html
<HEAD>
<TITLE>Imágenes de sustitución</TITLE>
</HEAD>
<BODY>
<A HREF="siguiente.html"
onMouseOver="document.Flecha.src='FlechaRoja.gif'"
onMouseOut="document.Flecha.src='FlechaAzul.gif'">
<IMG NAME="Flecha" SRC="FlechaAzul.gif" WIDTH="147"
HEIGHT="82" BORDER="0">
</A>
</BODY>
</HTML>

El modelo de eventos de JavaScript Página 2 - 22

Eventos de ratón: imágenes de sustitución

El modelo de eventos de JavaScript Página 2 - 23

Eventos de teclado: KeyDown/KeyUp

<HTML> JS20.html
<HEAD>
<TITLE>Eventos de teclado</TITLE>
</HEAD>
<BODY onKeyDown="document.bgColor='black';
document.fgColor='white'"
onKeyUp="document.bgColor='white';
document.fgColor='black'">
<H1>Ejemplo de página</H1>
<P>Si prefieres ver la página con los colores
invertidos, tan sólo tienes que mantener presionada
una tecla.</P>
</BODY>
</HTML>

El modelo de eventos de JavaScript Página 2 - 24

Eventos de teclado: KeyDown/KeyUp

Se mantiene Se libera la tecla

presionada
una tecla

El modelo de eventos de JavaScript Página 2 - 25

Eventos de teclado: KeyPress

<HTML> JS21.html
<HEAD>
<TITLE>Eventos de teclado</TITLE></HEAD>
<BODY>
<H1>Colores de fondo</H1>
<A HREF="javascript:void('')"
onKeyPress="document.bgColor='green'" onClick=
"document.bgColor='green'">Verde</A><BR><BR>
<A HREF="javascript:void('')"
onKeyPress="document.bgColor='cyan'" onClick=
"document.bgColor='cyan'">Cián</A><BR><BR>
<A HREF="javascript:void('')"
onKeyPress="document.bgColor='yellow'"
onClick="document.bgColor='yellow'">Amarillo</A>
</BODY>
</HTML>

El modelo de eventos de JavaScript Página 2 - 26

Eventos de teclado: onKeyPress

Se puede cambiar el color de fondo pulsando los vínculos

o presionando una tecla con el foco en el vínculo elegido
(el foco se pasa de uno a otro con la tecla Tab)

Foco

Tab+tecla

El modelo de eventos de JavaScript Página 2 - 27

El objeto event

Cada objeto dispone de una propiedad event que

plasma los eventos que se producen sobre el objeto.
El objeto event también tiene sus propias propiedades
(información sobre el evento actual).
Por ejemplo, si queremos saber cuál de los botones del
ratón ha pulsado el usuario al generar un evento Click
sobre el objeto actual, podemos usar la propiedad
button del objeto event.
Si self.event.button es 1, el izquierdo;
si es 2, el derecho.
O también podemos cancelar la propagación del evento
hacia arriba por la jerarquía de contenidos activando la
propiedad cancelBubble del objeto event.
self.event.cancelBubble=true

El modelo de eventos de JavaScript Página 2 - 28

Ejercicio: un visor de imágenes

Desarrollar una página que sirva para ver una serie de

imágenes; las imágenes tendrán establecido un orden;
se comenzará mostrando la primera imagen y habrá
cuatro botones bajo la imagen: para ir a la primera,
a la anterior, a la siguiente y a la última.
Cada vez que el puntero del ratón pase por encima de
uno de los botones se usará una imagen de sustitución.
Imágenes:
Como diapositivas:
calisto.jpg, europa.jpg, ganimedes.jpg, io.jpg
Botones:
Inicio1.jpg (Inicio2.jpg), Anterior1.jpg
(Anterior2.jpg), Siguiente1.jpg (Siguiente2.jpg) y
Final1.jpg (Final2.jpg)
(Entre paréntesis sus imágenes de sustitución.)

El modelo de eventos de JavaScript Página 2 - 29

Ejercicio: un visor de imágenes

El modelo de eventos de JavaScript Página 2 - 30