Eventos en JavaScript
Los eventos en JavaScript son muy importantes, ya que nos van a permitir controlar todo lo que ocurre en nuestra página web.
¿Qué es un evento?
Cuando haces clic con el ratón sobre un botón de una página web: eso es un evento.
Cuando mueves el ratón sobre una imagen: eso es un evento
Cuando modificas el contenido de un cuadro de texto en un formulario: eso es un evento
En definitiva, los eventos son las acciones que se van realizando sobre una página web (normalmente utilizando el ratón o el teclado)
JavaScript nos permite controlar qué ocurrirá cuando cualquiera de estos eventos se produce. Interesante ¿verdad?
Por ejemplo: Podemos hacer que cuando alguien pulse sobre un texto aparezca un mensaje de aviso en una ventana flotante o que al mover el ratón sobre una imagen ésta cambie a otra distinta…
De momento, aquí vamos a ver ejemplos muy básicos
onClick
Los eventos de ratón son los que se controlan más comúnmente.
Uno de los eventos de ratón en onClick. Este evento controla qué ocurre cuando se pulsa el botón del ratón:
<a href=”www.yahoo.com” onClick=”alert(‘el mejor buscador’)”> yahoo </a>
El código anterior situaría un enlace a www.yahoo.com en nuestra página. Al hacer clic sobre este enlace nos iríamos a www.yahoo.com, pero además, se abriría una ventana (alert) mostrándonos el mensaje ‘el mejor buscador’
Fíjate en la siguiente línea:
<img src=”c:\windows\aros.bmp” onClick=”alert(‘Esta es la imagen Aros.bmp’)”>
Esta línea muestra en la ventana del navegador el fichero aros.bmp de tu disco duro (si este archivo no existe o está en otra carpeta no aparecerá). Cuando haces clic sobre esa imagen, aparece una ventana alert() mostrando el mensaje ‘Esta es la imagen aros.bmp’
Existen muchas posibilidades a la hora de utilizar onClick, ¡imaginación!
onMouseOver
Este evento es parecido al anterior. En realidad es un evento que controla qué ocurre cuando pasamos el puntero del ratón sobre una determinada zona de la página web.
Podemos modificar fácilmente el último ejemplo realizado con onClick por este otro:
<img src=”c:\windows\aros.bmp” onMouseOver=”alert(‘Esta es la imagen Aros.bmp’)”>
Fíjate que la línea es prácticamente igual, solo que hemos sustituido onClick por OnMouseOver.
El efecto que se consigue es que la ventana alert() se abre simplemente con pasar el ratón por encima de la imagen aros.bmp
onLoad
onLoad nos permite controlar qué ocurre cuando se carga la página en el navegador:
<body onLoad=”alert(‘Bienvenido a mi página’)”>
Esta línea hará que aparezca un mensaje alert() justo al cargarse la página, por eso se utiliza en <body>.
onUnLoad
Como te imaginarás, este evento hace justo lo contrario al anterior, es decir, controla qué ocurre cuando se descarga la página del navegador (al movernos a otra página distinta, por ejemplo)
Podríamos modificar el ejemplo anterior así:
<body onLoad=”alert(‘Bienvenido a mi página’)” onUnLoad=”alert(‘Vuelve pronto…’)”>
De esta forma, al cargarse la página (onLoad) aparecería el mensaje ‘Bienvenido a mi página’ y al descargarse (onUnLoad) aparecería ‘Vuelve pronto …’