Eventos de encadenamiento

Cada vez que un usuario presiona un enlace, o mueve el cursor sobre uno, JavaScript dispara un evento. El evento de encadenamiento se llama onClick y se activa cada vez que alguien presiona un enlace. Otro evento similar es llamado onMouseOver, se activa cuando alguien mueve el cursor sobre el encadenamiento.

Puede usar estos eventos para afectar lo que el usuario ve en la página. Veamos el siguiente ejemplo de un evento de encadenamiento:

<a href="#" onClick="open('ejemplo_enlace.html','links',

'height=200,width=200,menubar,resizeable');">como usar un evento de encadenamiento</a>.

Ejemplo 5

La primer cosa interesante es que no existe un tag <script>. Eso es debido a que cualquier cosa que aparezca entre comillas dentro de un onClick o un onMouseOver se interpreta automáticamente como JavaScript. En efecto, debido a que el punto y coma marca el final de la sentencia, le permite escribir todo un programa en una línea, no es muy lindo pero funciona.

Veamos la primer línea de interés:

<a href="#" onClick="alert('Ooo, Hágalo nuevamente!');">Presióneme!</a>

Este es como un ancla (anchor) normal, pero tiene la magia de onClick="", que dice, "cuando alguien presione un enlace, corra el pequeño JavaScript entre las comillas".

Note que aún existe un punto y coma al final del alert.

También note que existe el signo # entre las comillas en el href="#". Esto es así para que el navegador no intente cargar otra página cuando presione el enlace. Si pone una dirección como http://www.dir.com.ar/, en lugar de #, el navegar correría el código JavaScript sobre dicha página.

Desafortunadamente, a veces usar el signo # provoca que el navegador salte a la parte superior de la página. Para que no ocurra este comportamiento, cambie el enlace a:

<a href="#"onClick="alert('Ooo, hágalo nuevamente!');return false;"> Presióneme! </a>

Note que return false, siguiendo al alert dentro del onClick. Esto le dice a JavaScript, detenga el navegador aún mirando lo que esta en href. Algunos viejos navegadores, no comprenden el return false, generalmente se hacen las dos cosas: Pone # dentro de un href y pone return false dentro de onClick. Esto se asegura que todos los navegadores hagan las cosas correctamente.

Esta sería la línea:

<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a>

Esta es como la primer línea, pero usa onMouseOver en lugar de onClick.