En Javascript hay un concepto llamado evento que se utiliza para referirse al instante justo en el que ocurre un determinado suceso. Por ejemplo, existe un evento llamado click que se dispara cuando un usuario hace clic sobre un elemento HTML. Podemos decirle al navegador que cuando ocurra un evento concreto, realice una acción determinada. De esta forma, podemos preparar nuestra página para que actúe según las circunstancias.
Eventos
Existen muchísimos tipos de eventos en Javascript. Para activarlos, lo primero es elegir la etiqueta en la que ocurrirá el evento. Una vez elegida, colocaremos un atributo en dicha etiqueta para detectar si se produce el evento. Además, hay que indicar el prefijo on en el atributo del evento. Por ejemplo, si queremos detectar el evento click, el atributo HTML deberá llamarse onClick.
Así pues, veamos un ejemplo:
<div>
<img src="gandalf.jpg" alt="Gandalf" onClick="alert('¡Has hecho clic!')" />
</div>
En este sencillo ejemplo, hemos especificado una imagen que es la que estará «escuchando» el evento click. Si el usuario hace clic sobre ese elemento, o sea, sobre la imagen, el navegador dispará el evento y ejecutará la función Javascript alert(), mostrando un mensaje por pantalla: ¡Has hecho clic!.
Detalles del evento
En los eventos, puede que queramos obtener información más específica, como por ejemplo, el número de veces que hizo clic el usuario sobre la imagen (si fue un solo clic, si fue doble clic, etc...). Este dato específico lo devuelve el evento onClick a través del objeto especial event, así que continuemos con el ejemplo anterior, modificando algunas cosas:
<div>
<img src="gandalf.jpg" alt="Gandalf" onClick="updateCounter(event)" />
<p>Has hecho clic a Gandalf <span id="num">0</span> veces.</p>
</div>
Obsérvese que en este caso, en lugar del alert() usado antes, ejecutamos una función javascript que crearemos nosotros, llamada updateCounter(). Después de la imagen, hay un párrafo de texto que contiene una frase y un fragmento <span id="num"> que contendrá el número de veces que se ha pulsado sobre la imagen. Inicialmente se encuentra establecido a 0.
Por su parte, la función updateCounter() pasa por parámetro una variable especial event, que es la que tiene la información sobre el evento ocurrido, y que posteriormente utilizaremos para extraer dicha información.
Definimos la función updateCounter() en Javascript:
function updateCounter(e) {
document.querySelector("#num").textContent = e.detail;
}
Esta función busca la etiqueta HTML que tiene un id="num", y mediante .textContent modificamos su contenido. El nuevo contenido es e.detail que no es más que un dato que se encuentra en el evento que se ha disparado. Ese dato devuelve el número de veces seguidas (contador) que el usuario pulsó sobre la imagen.
Veamos finalmente lo que ocurriría con este ejemplo. Lo que aparece a la izquierda es cuando el usuario pulsa el botón del ratón (LButtonDown) y cuando lo suelta (LButtonUp):
Otros Eventos
Existen muchos otros eventos, prácticamente uno para cada acción que pueda ocurrir en un documento HTML. A continuación, muestro algunos grupos de eventos muy utilizados frecuentemente de la gran cantidad de eventos existentes en Javascript.
Eventos de documento
Es posible poner a escuchar ciertos eventos sobre el documento HTML completo, estableciendo el atributo del evento en la etiqueta <body>:
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| UIEvent | onLoad | La página (el documento HTML) ha terminado de cargarse. |
| UIEvent | onUnload | La página (el documento HTML) va a cerrarse. |
| UIEvent | onScroll | El usuario ha hecho scroll sobre la página (el documento HTML). |
Eventos de carga de recursos
Sobre las etiquetas que cargan un archivo externo, como podrían ser <img> o <script>, e incluso <style> con estilos CSS en línea. Los archivos multimedia <audio> y <video> tienen sus propios eventos específicos, ya que tienen un proceso de carga especial:
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| UIEvent | onLoad | El recurso ha terminado de cargarse en la página. |
| UIEvent | onUnload | El recurso ha sido eliminado de la página. |
| UIEvent | onAbort | El recurso ha sido cancelado y no ha terminado su carga. |
| UIEvent | onError | El recurso ha dado un error y no ha terminado su carga. |
| UIEvent | onSelect | El usuario ha seleccionado un texto de un campo de datos. |
Eventos de foco en elementos
Sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| FocusEvent | onBlur | El elemento ha perdido el foco (foco de salida). |
| FocusEvent | onFocusout | El elemento ha perdido el foco (y permite bubble). |
| FocusEvent | onFocus | El elemento ha ganado el foco (foco de entrada). |
| FocusEvent | onFocusin | El elemento ha ganado el foco (y permite bubble). |
Eventos de ratón
Los eventos de ratón se utilizan para detectar todas aquellas acciones que el usuario realiza mediante el ratón con algún elemento de la página, como podría ser mover el ratón por encima de ellos, hacer clic, mover la rueda del ratón, etc...
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| MouseEvent | onClick | El usuario ha pulsado (y soltado) el elemento. |
| MouseEvent | onDblclick | El usuario ha hecho doble clic en el elemento. |
| MouseEvent | onMousedown | El usuario ha pulsado (aún sin haber soltado) el elemento. |
| MouseEvent | onMouseup | El usuario ha soltado el botón pulsado en un elemento. |
| MouseEvent | onMousemove | El usuario ha movido el ratón. |
| MouseEvent | onMouseenter | El usuario ha movido el ratón dentro de un elemento. |
| MouseEvent | onMouseleave | El usuario ha movido el ratón fuera de un elemento. |
| MouseEvent | onMouseout | El usuario ha movido el ratón fuera de un elemento (bubbles). |
| MouseEvent | onMouseover | El usuario ha movido el ratón dentro de un elemento (bubbles). |
| WheelEvent | onWheel | El usuario ha movido la rueda del ratón. |
Eventos de entrada de datos
Sobre elementos <input> o elementos HTML con el atributo contentEditable, y por lo tanto, elementos HTML que son editables por el usuario:
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| InputEvent | onBeforeInput | Un elemento <input> o con atributo contentEditable a punto de cambiar. |
| InputEvent | onInput | Un elemento <input> o con atributo contentEditable ha cambiado. |
Eventos multimedia
Sobre elementos multimedia como <audio> o <video>, donde se carga un recurso (MP4, WebM, MP3, OGG...) externo:
| Tipo de evento | Atributo HTML | Descripción |
|---|---|---|
| MediaEvent | onEmptied | El audio o video se ha vacíado (recargar elemento). |
| MediaEvent | onLoadedMetadata | Se han precargado los metadatos del audio o video (duración, subs...) |
| MediaEvent | onLoadedData | Se ha precargado el comienzo del audio o video. |
| MediaEvent | onCanPlay | El audio o video se ha precargado lo suficiente para reproducir. |
| MediaEvent | onCanPlayThrough | El audio o video se ha precargado completamente. |
| MediaEvent | onPlay | El audio o video comienza a reproducirse (tras haber sido pausado). |
| MediaEvent | onPlaying | El audio o video comienza a reproducirse. |
| MediaEvent | onPause | El audio o video ha sido pausado. |
| MediaEvent | onTimeUpdate | El audio o video ha avanzado en su reproducción. |
| MediaEvent | onEnded | El audio o video ha completado su reproducción. |
| MediaEvent | onWaiting | El audio o video está esperando a que el buffer se complete. |
| MediaEvent | onDurationChange | El audio o video ha cambiado su duración total (metadatos). |
| MediaEvent | onRateChange | El audio o video ha cambiado su velocidad de reproducción. |
| MediaEvent | onVolumeChange | El audio o video ha cambiado su volumen de reproducción. |
| ProgressEvent | onProgress | El audio o video se está descargando. |
| ProgressEvent | onLoadStart | El audio o video ha comenzado a descargarse. |
| MediaEvent | onSuspend | La precarga del audio o video ha sido suspendida (ok o pause). |
| UIEvent | onAbort | La precarga del audio o video ha sido abortada o reiniciada. |
| UIEvent | onError | Ha ocurrido un error. |
| MediaEvent | onStalled | El navegador intenta precargar el audio o video, pero se ha estancado. |
| MediaEvent | onSeeking | El navegador comenzó a buscar un momento concreto del audio/video. |
| MediaEvent | onSeeked | El navegador terminó de buscar un momento concreto del audio/video. |
| UIEvent | onResize | El video ha sido redimensionado. |
Todos estos eventos (y muchos otros no incluídos en esta sección) se pueden llamar desde Javascript para realizar personalizaciones más específicas, pero en ese caso ya hay que recurrir a Javascript y realizar tareas y metodologías de programación más específicas.
