Resumen: Entrega nº59 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01159E

 

 

LISTA DE EVENTOS JAVASCRIPT

Ya sabemos cómo añadir manejadores de eventos para ejecutar un fragmento de código JavaScript cuando tenga lugar un determinado evento. Pero, ¿cuáles son los eventos reconocibles? ¿cuántos hay? ¿cómo podemos saber sus nombres?  ¿A qué elementos HTML son aplicables?

logo javascript

 

Estas preguntas que a priori parecen sencillas, en realidad son complicadas de responder debido a diversos motivos como:

a) El número de eventos reconocibles se está ampliando constantemente. Inicialmente había 6 u 8 eventos reconocibles, luego fueron 15 ó 20, luego 50 ó 60, luego 100 ó 120… Por tanto no podemos responder a la pregunta de cuántos eventos existen, porque el número de eventos reconocibles cambia con frecuencia.

b) Algunos eventos sólo son reconocidos por algunos navegadores pero no por otros. Nosotros vamos a tratar de centrarnos en los eventos que son reconocidos por todos los navegadores.

c) No existe un organismo único encargado de definir los eventos reconocibles, sino varios. Es decir, los eventos con los que puede trabajar un navegador son el resultado de la definición de eventos realizada por diferentes especificaciones oficiales (DOM, HTML5, CSS Animations, especificaciones oficiales de diversas APIs, etc.) que van siendo integradas en los navegadores.

 

Por tanto más que pretender conocer todos los eventos y en base a ello escribir nuestro código, más bien debemos preguntarnos qué es lo que queremos hacer y en base a ello buscar el evento que nos permite hacerlo. Una vez localizado el evento, deberemos documentarnos en internet para comprobar cuál es la compatibilidad con los distintos navegadores. Recomendamos usar sólo aquellos eventos que tengan compatibilidad contrastada en la mayoría de los navegadores.

La siguiente lista por tanto sólo pretende ser orientativa de los eventos disponibles de uso más habitual.

Son eventos que se usan con mucha frecuencia onload, para realizar acciones una vez termina la carga de la página web, así como onclick, onmouseover, onmouseout para control de la apariencia de la página web según por donde pase el usuario el ratón (mouse), y onchange, onsubmit y onreset para control de los formularios.

Tener en cuenta que no todos los eventos hacen bubbling y no todos tienen acción por defecto, o si la tienen, no para todos puede ser evitada. Cuando trabajemos con un evento es conveniente buscar documentación adicional sobre su comportamiento y respuesta en los distintos navegadores.

 

 

LISTA DE EVENTOS JAVASCRIPT

Tipo de evento

Nombre con prefijo on (eliminar cuando proceda)

Descripción aprenderaprogramar.com

Relacionados con el ratón

onclick

Click sobre un elemento

ondblclick

Doble click sobre un elemento

onmousedown

Se pulsa un botón del ratón sobre un elemento

onmouseenter

El puntero del ratón entra en el área de un elemento

onmouseleave

El puntero del ratón sale del área de un elemento

onmousemove

El puntero del ratón se está moviendo sobre el área de un elemento

onmouseover

El puntero del ratón se sitúa encima del área de un elemento

onmouseout

El puntero del ratón sale fuera del área del elemento o fuera de uno de sus hijos

onmouseup

Un botón del ratón se libera estando sobre un elemento

contextmenu

Se pulsa el botón derecho del ratón (antes de que aparezca el menú contextual)

Relacionados con el teclado

onkeydown

El usuario tiene pulsada una tecla (para elementos de formulario y body)

onkeypress

El usuario pulsa una tecla (momento justo en que la pulsa) (para elementos de formulario y body)

onkeyup

El usuario libera una tecla que tenía pulsada (para elementos de formulario y body)

Relacionados con formularios

onfocus

Un elemento del formulario toma el foco

onblur

Un elemento del formulario pierde el foco

onchange

Un elemento del formulario cambia

onselect

El usuario selecciona el texto de un elemento input o textarea

onsubmit

Se pulsa el botón de envío del formulario (antes del envío)

onreset

Se pulsa el botón reset del formulario

Relacionados con ventanas o frames

onload

Se ha completado la carga de la ventana

onunload

El usuario ha cerrado la ventana

onresize

El usuario ha cambiado el tamaño de la ventana

Relacionados con animaciones y transiciones

animationend, animationiteration, animationstart, beginEvent, endEvent, repeatEvent, transitionend

Relacionados con la batería y carga de la batería

chargingchange, chargingtimechange, dischargingtimechange, levelchange

Relacionados con llamadas tipo telefonía

alerting, busy, callschanged, connected, connecting, dialing, disconnected, disconnecting, error, held, holding, incoming, resuming, statechange

Relacionados con cambios en el DOM

DOMAttrModified, DOMCharacterDataModified, DOMContentLoaded, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

Relacionados con arrastre de elementos (drag and drop)

drag, dragend, dragenter, dragleave, dragover, dragstart, drop

Relacionados con video y audio

audioprocess, canplay, canplaythrough, durationchange, emptied, ended, ended, loadeddata, loadedmetadata, pause, play, playing, ratechange, seeked, seeking, stalled, suspend, timeupdate, volumechange, waiting, complete

Relacionados con la conexión a internet

disabled, enabled, offline, online, statuschange, connectionInfoUpdate

Otros tipos de eventos

Hay más tipos de eventos: relacionados con la pulsación sobre pantallas, uso de copy and paste (copiar y pegar), impresión con impresoras, etc.

 

 

Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender ahora el significado de cada uno de ellos. Simplemente ten unas nociones básicas que te permitan resolver los retos que como programador te puedan ir surgiendo.

 

 

EJERCICIO 1

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen. Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella. Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y un formulario con los campos nombre, apellidos, edad y correo electrónico, así como con botones enviar y cancelar. Utiliza el evento onsubmit y otras herramientas para impedir que se envíe el formulario si se produce alguna de estas circunstancias:

a) El nombre está vacío ó el correo electrónico está vacío.

b) El correo electrónico no contiene los símbolos @ (arroba) y . (punto). Por ejemplo juan arroba gmail.com no es un correo válido.

c) No existe al menos una letra precediendo el símbolo @ del correo electrónico y una letra después de este símbolo. Por ejemplo a@.com no es un correo válido.

d) No existen al menos dos letras después del punto en el correo electrónico. Por ejemplo juan@gmail.c no es un correo válido.

e) La edad es cero o menor de cero.

En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinámicamente) cuando el campo que tenía un problema tome el foco (para ello usa el evento onfocus).

 

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: