> Manuales > Desarrollo en Javascript del lado del cliente

Lista de los tipos de eventos más habituales en el lenguaje Javascript, junto con una descripción de cada uno.

Ahora vamos a ver una lista de los tipos de eventos que hay disponibles en Javascript, ofreciendo una pequeña descripción de cada uno.

Los tipos de eventos los define el estándar Javascript y se implementan en los navegadores. Contienen todas las situaciones o cosas destacables que el propio navegador te va a informar. Nosotros podremos crear manejadores de eventos a todos estos tipos de eventos. Lógicamente, dependiendo de la aplicación web que estés realizando y lo que quieras conseguir, crearás manejadores a unos tipos de eventos u otros, bajo tus propios criterios o necesidades.

Si queremos saber previamente qué es un evento y como se tratan en Javascript, podemos consultar el artículo anterior del manual: Los eventos en Javascript

Tipos de eventos en Javascript 1.2

Estos tipos de eventos son los más comunes, presentes en Javascript 1.2. Existen otros tipos de eventos que también son muy interesantes y veremos a continuación en este mismo artículo.

Cada evento tiene un nombre, por ejemplo "click". Además en el propio código HTML podemos asociar manejadores de eventos mediante atributos, que son usados para invocar una serie de comandos cuando se produce un evento sobre ese elemento. Los atributos que podemos usar en el HTML para asociar manejadores de eventos tienen siempre el prefijo "on" seguido del nombre del evento. Por ejemplo, "onclick".

Nota: La lista de tipos de eventos contiene el nombre del manejador en negrita, su descripción y finalmente la versión de Javascript que incorporó dicho manejador.

abort (onabort)

Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página.
Javascript 1.1

blur (onblur)

Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento.
Javascript 1.0

change (onchange)

Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0
Javascript 1.0

click (onclick)

Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.
Javascript 1.0

dragdrop (ondragdrop)

Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.
Javascript 1.2

error (onerror)

Se produce cuando no se puede cargar un documento o una imagen y esta queda rota.
Javascript 1.1

focus (onfocus)

El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.
Javascript 1.0

keydown (onkeydown)

Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.
Javascript 1.2

keypress (onkeypress)

Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla..
Javascript 1.2

keyup (onkeyup)

Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla.
Javascript 1.2

load (onload)

Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse.
Javascript 1.0

mousedown (onmousedown)

Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no.
Javascript 1.2

mousemove (onmousemove)

Se produce cuando el ratón se mueve por la página.
Javascript 1.2

mouseout (onmouseout)

Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.
Javascript 1.1

mouseover (onmouseover)

Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página.
Javascript 1.0

mouseup (onmouseup)

Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.
Javascript 1.2

move (onmove)

Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.
Javascript 1.2

resize (onresize)

Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.
Javascript 1.2

reset (onreset)

Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.
Javascript 1.1

select (onselect)

Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.
Javascript 1.0

submit (onsubmit)

Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho.
Javascript 1.0

unload (onunload)

Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.
Javascript 1.0

Tipos de eventos en Javascript 1.3

Hasta ahora en el artículo vimos los eventos de las versiones de Javascript 1.0, 1.1 y 1.2, pero en este caso vamos a presentar el listado de los manejadores de eventos de Javascript 1.3.

DblClick (ondblclick):

Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.

scroll (onscroll):

Este evento se produce cuando se realiza scroll o desplazamiento. Este desplazamiento se puede realizar en la página completa, pero también en elementos de la página que tengan sus propias zonas de scroll.

Conclusión

Hemos conocido los tipos de eventos más usados en Javascript. Es solo un listado de los más importantes. Existen otros que no son tan utilizados pero que podrías consultar en la documentación del DOM del elemento en concreto que necesites controlar.

No te preocupes si algún conocimiento ha quedado en el aire, porque vamos a seguir haciendo prácticas con eventos en Javascript. Por ejemplo, en el siguiente artículo verás un ejemplo del evento abort. El manual también está plagado de ejemplos de eventos a continuación.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual