Enlaces en HTML (VIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Eventos

Vamos a ver ahora una de las partes más importantes sobre la etiqueta <A>, y es la correspondiente a los eventos que soporta.

La importancia de este aspecto se basa en que los links son verdaderos "disparadores" de eventos, ya que soportan casi todos los tipos de ellos que existen en HTML, permitiéndonos entonces extender la captura de determinados eventos a otros elementos HTML que no los soportan bien o por completo. Vamos a ver primero qué eventos podemos manejar con esta etiqueta y luego explicamos esto con más detalle. Para mostrar ejemplos vamos a usar el método de JavaScript alert, que lanza una ventana con un mensaje.

Los principales eventos soportados por la etiqueta <A> son:

* Eventos de ratón:

- onmouseOver, que salta cuando se pasa el puntero del ratón sobre un enlace:

<a href="#" onmouseOver="alert('Evento MOUSEOVER')">onmouseOver</a>

que da:

onmouseOver

- onmouseOut , que salta cuando, trás pasar el puntero del ratón por el enlace, nos vamos de él.

<a href="#" onmouseOut="alert('Evento MOUSEOUT')">onmouseOut</a>

que origina:

onmouseOut

- onmouseDown, que salta cuando pulsamos sobre el enlace con el puntero del ratón, sin necesidad de despulsar. Es decir, salta con el sólo hecho de bajar el botón izquierdo o derecho del ratón sobre el enlace:

<a href="#" onmouseDown="alert('Evento MOUSEDOWN')">onmouseDown</a>

que origina:

onmouseDown

- onmouseUp, que salta cuando, trás haber pulsado con uno de los botones del ratón sobre el enlace, dejamos libre ese botón del ratón, sin necesidad de sacar el puntero del enlace:

<a href="#" onmouseUp="alert('Evento MOUSEUP)">onmouseUp</a>

que origina:

onmouseUp

- onmouseMove, que salta cuando movemos el puntero del ratón sobre el texto o imagen del enlace. No voy a usar ahora el método alert, ya que si así lo hiciera saltaría el la ventana constantemente. Deciros que mediante este evento podemos por ejemplo capturar las coordenadas del puntero del ratón (podéis ver varios ejemplos en la sección WebScript). Un ejemlpo de sintaxis sería:

<a href="#" onmouseMove="funcion()">onmouseMove</a>

- onClick, que salta cuando se pincha sobre el enlace con el botón izquierdo del ratón :

<a href="#" onClick="alert('Evento CLICK)">onClick</a>

que origina:

onClick

- onDblclick, que salta cuando se hace doble click sobre el enlace con el botón izquierdo del ratón :

<a href="#" onDblclick="alert('Evento DBLCLICK)">onDblclick</a>

que origina:

onDblclick

* Eventos de teclado:

- onKeydown, que salta cuando, teniendo el foco el enlace, se comienza a pulsar una cualquiera de las teclas del teclado. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace y luego una tecla cualquiera:

<a href="#" onKeydown="alert('Evento KEYDOWN)">onKeydown</a>

que origina:

onKeydown

- onKeypress, que salta cuando,teniendo el foco el enlace, se acaba de pulsar una cualquiera de las teclas del teclado. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace y luego una tecla cualquiera:

<a href="#" onKeypress="alert('Evento KEYPRESS)">onKeypress</a>

que origina:

onKeypress

- onKeyup, que salta cuando, teniendo el foco el enlace, y trás haber pulsado una cualquiera de las teclas del teclado, se libera dicha tecla. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace, luego una tecla cualquiera y después la sueltas:

<a href="#" onKeyup="alert('Evento KEYUP)">onKeyup</a>

que origina:

onKeyup

* Eventos de foco:

- onFocus, que salta cuando el enlace recibe el foco, bien al ser pulsado con el puntero del ratón, bien al acceder a él mediante el tabulador o una función de JavaScript:

<a href="#" onFocus="alert('Evento FOCUS)">onFocus</a>

que origina:

onFocus

Una de las diferencias entre este evento y onClick es que con él sólo se lanza una vez el evento mientras que el enlace tenga el foco, mientras que con onClick se lanzará cada vez que pinchemos el enlace.

- onBlur, que salta cuando, trás haber recibido el foco el enlace, pasamos el foco a otro elemento de la página:

<a href="#" onBlur="alert('Evento BLUR)">onBlur</a>

que origina:

onBlur

Para probar el ejemplo anterior, pinchar primero sobre el enlace, y después sobre otra parte cualquiera de la ventana del navegador.

NOTA: Nestcape Navigator 4x no soporta por defecto ningún evento de teclado. Es posible capturar estos eventos, pero hay que hacerlo de otra manera, que ahora no vamos a ver. En la sección WebScrip tenéis varios ejemplos de cómo se hace.

NOTAS ADICIONALES:

1) Aunque a primera vista hay eventos que puedan parecer de igual activación, cada uno de ellos difiere de los demás en algún aspecto. No hay dos eventos iguales, aunque en ocasiones parezca que trabajan igual.

2) Alguno de los eventos anteriores puede parecer a primera vista poco útiles. En el caso de enlaces simples de texto es cierto que algunos eventos tienen una aplicación práctica incierta, pero cuando entramos en el uso de los links como disparadores de eventos para otros elementos es cuando adquieren todo su sentido.

AMPLIACIÓN:

Retornando a lo que decíamos al principio de éste capítulo, existen muchos elementos de HTML que no soportan todos los eventos anteriores, o que lo hacen de forma defectuosa o incompleta. Es entonces cuando podemos auziliarnos de los enlaces para dar a ese elemento HTML la facultad de capturar todos los eventos. En realidad no es él el que captura el evento, si no el enlace que lo contiene, pero el resultado final, que es el que de verdad nos interesa, es el que estábamos buscando.

Como ejemplo de esto, vamos a ver cómo una imagen, que en Nestcape Navigator 4x no soporta el evento onmouseOver, si puede ser activada mediante él usando un enlace. Si tenemos definida la imagen siguiente:

<img src="images/yahoo.gif" width="66" height="20" onmouseOver="alert('evento capturado')">

en Internet Explorer sí que se activará el evento al pasar el cursor sobre ella, pero si estás usando Nestcape 4x, no ocurrirá nada. Ahora bien, si metemos la imagen dentro de un enlace y colocamos el evento en el mismo, tendremos el problema resuelto:

<a href="#" onClick="return false" onmouseOver="alert('evento capturado')">
  <img src="images/yahoo.gif" width="66" height="20">
</a>

Si programáis en JavaScript os daréis cuenta de la cantidad de veces que se recurre a los enlaces para capturar eventos y lanzar funciones.

NOTA:

A lo largo del tema que estamos tratando, os habréis tal vez preguntado porqué cuando pongo un enlace que no quiero que me lleve a ninguna página al ser pinchado utilizo como valor de href una almohadilla y luego siempre pongo el evento onClick="return false". La razón es que si no pongo la propiedad href, el navegador no considera a la etiqueta <A> como un enlace; por eso pongo la almohadilla, que es como si estableciera que el enlace me va a llevar a una anclaje genérico, aunque en realidad éste no exista. Pero si sólo pongo eso, al pinchar sobre el enlace el navegador me lleva al principio de la página, ya que considera que el ancla a la que me refiero queda allí. Es por eso que se pone return false en el evento onClick, ya que así anulamos la funcionalidad de la propiedad href, con lo que podemos pulsar un enlace y aprovecharnos de sus eventos sin que el documento de la página se inmute.