Eventos I.
Los eventos en JavaScript son muy importantes, ya que nos van a permitir controlar todo lo que ocurre en nuestra página web.
En este apartado veremos qué entendemos por evento y cuáles son los principales eventos que se producen. En el siguiente apartado veremos cómo manejarlos y obtener una información más detallada sobre los eventos que se producen.
¿Qué es un evento?.
Un evento es cualquier acción realizada por el usuario, bien sea con el teclado, bien con el ratón. Los eventos pueden suceder sobre la ventana del explorador (cambiar el tamaño, maximizarla,minimizarla, cerrarla...), el documento HTML total o asociarse a elementos concretos (una imagen, una tabla, un párrafo, un botón, etc). Pero no todos los eventos son ocasionados por el usuario: carga de la página o de una imagen.
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.
Los navegadores, a partir del surgimiento de Netscape 2, son capaces de capturar estos sucesos, y nosotros podemos, gracias a JavaScript, controlar qué ocurrirá cuando cualquiera de estos eventos se produce.
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...
Cuando Netscape lanzó su versión 2 con esta posibilidad, sólo un número limitado de eventos eran posibles de ser manejados: cambio de imágenes cuando el ratón pasaba por encima de ellas, validación de formularios de modo que ésta se realizaba antes de ser enviada la petición al servidor. Podía detectar cuándo un campo de un formulario obtenía o perdía el foco o si la página se había empezado a cargar o ya estaba cargada del todo. Así, cuando se pulsaba en un enlace, el manejador de eventos se definió de la siguiente forma:
<a href="pagina.html" onclick="alert('Has hecho clic')">
Esta forma de manejarlos se fue extendiendo y el resto de navegadores, incluso Internet Explorer, tuvieron que adaptarse a ello.
Pero desde entonces son muchos más los eventos que se han conseguido capturar y su tratamiento ha cambiado pudiéndose capturar directamente a través de JavaScript y no sólo con las etiquetas de HTML. Empezó a surgir una "guerra" entre los navegadores, especialmente entre Netscape e Internet Explorer, de forma que no todos los navegadores son capaces de capturar los mismos eventos ni los manejan de la misma manera. Así pues, hemos de tener cuidado cuando manejamos eventos, pues la ejecución de un script que funciona como deseamos en un navegador, puede ocasionar errores en otro. El resto de navegadores han asumido los eventos de uno u otro intentando adaptarse en la mayor medida posible a los dos. Konqueror y Safari han optado por adaptarse al modelo de W3c que se basa en el modelo antiguo de Netscape 3 pero agregando nuevas funcionalidades. Opera e iCab soportan la mayor parte de ambos modelos.
Una opción puede consistir en determinar con qué navegador se está visualizando nuestra página y según ello, ejecutar un script y otro (Ver el apartado Objeto navigator):
if(Netscape) {
modelo Netscape;
}
else if(Explorer) {
modelo Explorer ;
}
Eventos del ratón.
Son sucesos que se producen cuando el usuario lleva a cabo alguna acción con el ratón y son los que se controlan con mayor frecuencia.
onClick. Este evento controla qué ocurre cuando se pulsa el botón izquierdo del ratón:
<a href="http://www.google.es/"
onClick="alert('el mejor buscador')">google</a>
El código anterior situaría un enlace a www.google.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'. Pulsa en el siguiente enlace para ver una demostración:
Fíjate en la siguiente línea:
<img src="c:windowsaros.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'. Como puedes ver, es un evento que se puede utilizar sobre cualquier elemento de una página.
Ver/Ocultar código fuente
| Si pulsas en esta celda se cambiará el color del fondo |
 Y si pulsas sobre esta imagen, también ésta cambiará. |
<table align=center
>
<tr onclick=return cambiaColor('celda1')
id=celda1
>
<td style=width:300px; border:dashed 1px red;
>
Si pulsas en esta celda se cambiará el color del fondo.
</td>
</tr>
<tr>
<td>
<img src=lista.gif
onclick=return cambiaImagen(this)
>
Y si pulsas sobre esta imagen, también ésta cambiará.
</td>
</tr>
</table>
<script type=text/javascript
>
function cambiaColor(elemento) {
var obj = document.getElementById(elemento);
if(obj!=null) {
var colorFondo = obj.style.backgroundColor;
if(colorFondo == '#98cbcb' ||
colorFondo.toString() == "rgb(152, 203, 203)")
colorFondo = 'steelblue';
else
colorFondo = '#98cbcb';
}
}
function cambiaImagen(imagen) {
if(imagen.src.indexOf(lista.gif
) == -1)
imagen.src = 'lista.gif';
else imagen.src = 'boton.gif';
}
</script>
Existen muchas posibilidades a la hora de utilizar onClick, ¡imaginación!
onDblClick. Este evento es similar al anterior. La diferencia reside en que es preciso que se pulse dos veces con el botón izquierdo del ratón, y no sólo una vez. Veamos la diferencia:
Pulsa una sola vez
<span onClick=alert('Has pulsado una vez')
style=color:#CC0033<
>Pulsa una sola vez>/span>
Hacer doble click
<span onDblClick=alert('Has pulsado dos veces')
style=color:teal
>Hacer doble click>/span>
onMouseDown. Este evento es muy parecido al anterior. La diferencia está en que el click se puede hacer tanto con el botón derecho como con el izquierdo, y el evento será capturado.
Podemos modificar fácilmente el último ejemplo por este otro:
Pulsa con un botón del ratón
<span onMouseOver="alert('Has pulsado un botón"+
" del ratón')">Pulsa con el ratón>/span>
onMouseUp. Es el evento producido cuando, tras pulsar con uno de los botones del ratón en una zona de la página, se levanta el dedo de dicho botón.
Pulsa un momento con el ratón y luego suelta,
así verás mejor la diferencia
<span onMouseUp="alert('Has levantado el cursor')">Pasa
el ratón>/span>
onMouseOver. Se produce en el momento en que el puntero del ratón pasa sobre una determinada zona de la página web (el elemento que captura dicho evento):
Pasa el ratón
<span onMouseOver="alert('Llega el cursor')"
style="color:#CC0033">Pasa el ratón>/span>
Fíjate que la línea es prácticamente igual, sólo 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 del texto escrito.
onMouseMove. Este evento se produce cuando el ratón se está moviendo dentro de una zona de la página.
Cuando muevas el ratón por encima de la imagen inferior,
el color de fondo de este recuadro cambiará.
onMouseOut. Este evento es el opuesto al anterior, se produce cuando el puntero del ratón abandona una zona de la página.
Mueve el ratón por encima de la imagen inferior, y luego
cuando salgas el color de fondo de este recuadro cambiará.
Eventos del teclado.
onKeyDown: Al pulsar una tecla.
onKeyPress: Mientras se mantiene pulsada una tecla.
onKeyUp: Al dejar de pulsar una tecla.
Para ver la diferencia entre estos tres eventos, a continuación tienes tres cajas de texto.
