INTRODUCCIÓN
Un evento es algo que ocurre. Hasta el momento todos los scripts han seguido un orden secuencial en su ejecución, alterado en alguna ocasión por alguna de las estructuras de flujo. Sin embargo, podemos permitir que los usuarios de nuestras páginas interaccionen con ellas, de forma que éstas respondan a los distintos eventos que se puedan producir. JavaScript permite dicha interacción ya que utiliza el modelo de programación basada en eventos. De esta manera también conseguimos que nuestras páginas sean mucho más útiles.
¿Qué es la programación basada en eventos?
Podemos decir que los scripts esperan hasta que ocurre algo que puede ser una pulsación, un movimiento del ratón, etc. Entonces es cuando el script responde adecuadamente a dicho suceso. La respuesta puede ser procesar una información, ejecutar una función que previamente se asoció a dicho evento, etc.
Cada elemento XHTML tiene definida su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, PULSAR el botón izquierdo del ratón) puede estar definido para varios elementos XHTML y un mismo elemento XHTML puede tener asociados diferentes eventos.
El nombre de los eventos se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.
La siguiente tabla resume los eventos más importantes definidos por JavaScript:
Pero un evento en sí mismo no tiene mayor importancia a no ser por lo que puede llevar asociado. Por ejemplo puede ser que al ocurrir el evento se ejecute determinado código que le hayamos previamente asociado, de esta forma conseguimos que nuestro script responda a las situaciones que se den en el transcurso de su ejecución. Estas funciones o códigos asociados a los eventos es lo que llamamos manejadores de eventos o en inglés handlers.
Se pueden indicar de varias maneras:
Como atributos de los elementos de HTML: se incluye en el propio atributo. Es sin duda la forma más sencilla de hacerlo. Pongamos algunos ejemplos que implementaremos dentro de la estructura de HMTL:
<input type="button" value="Da un clic aquí y verás" onclick="Document.write('Gracias por pulsar este botón');" />
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>eventos</title>
</head>
<body>
<div onclick="alert('Has pinchado con el ratón');">
Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima.
</div>
<input type="button" value="Pulsar o da clic aquí y verás" onclick="alert('Gracias por pulsar');" />
<div onmouseover="alert('Acabas de pasar el ratón por encima');">
O simplemente pasar el ratón por encima.
</div>
</body>
</html>
