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?
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.
