La lista completa de eventos que se pueden generar en un navegador se puede dividir en cuatro grandes grupos. La especificación de DOM define los siguientes grupos:
- Eventos de ratón: se originan cuando el usuario emplea el ratón para realizar algunas acciones.
- Eventos de teclado: se originan cuando el usuario pulsa sobre cualquier tecla de su teclado.
- Eventos HTML: se originan cuando se producen cambios en la ventana del navegador o cuando se producen ciertas interacciones entre el cliente y el servidor.
- Eventos DOM: se originan cuando se produce un cambio en la estructura DOM de la página. También se denominan "eventos de mutación".
6.5.1. Eventos de ratón
Los eventos de ratón son, con mucha diferencia, los más empleados en las aplicaciones web. Los eventos que se incluyen en esta clasificación son los siguientes:
| Evento | Descripción |
|---|---|
click |
Se produce cuando se pulsa el botón izquierdo del ratón. También se produce cuando el foco de la aplicación está situado en un botón y se pulsa la tecla ENTER |
dblclick |
Se produce cuando se pulsa dos veces el botón izquierdo del ratón |
mousedown |
Se produce cuando se pulsa cualquier botón del ratón |
mouseout |
Se produce cuando el puntero del ratón se encuentra en el interior de un elemento y el usuario mueve el puntero a un lugar fuera de ese elemento |
mouseover |
Se produce cuando el puntero del ratón se encuentra fuera de un elemento y el usuario mueve el puntero hacia un lugar en el interior del elemento |
mouseup |
Se produce cuando se suelta cualquier botón del ratón que haya sido pulsado |
mousemove |
Se produce (de forma continua) cuando el puntero del ratón se encuentra sobre un elemento |
Todos los elementos de las páginas soportan los eventos de la tabla anterior.
6.5.1.1. Propiedades
El objeto event contiene las siguientes propiedades para los eventos de ratón:
- Las coordenadas del ratón (todas las coordenadas diferentes relativas a los distintos elementos)
- La propiedad
type - La propiedad
srcElement(Internet Explorer) otarget(DOM) - Las propiedades
shiftKey,ctrlKey,altKeyymetaKey(sólo DOM) - La propiedad
button(sólo en los eventosmousedown,mousemove,mouseout,mouseoverymouseup)
Los eventos mouseover y mouseout tienen propiedades adicionales. Internet Explorer define la propiedad fromElement, que hace referencia al elemento desde el que el puntero del ratón se ha movido y toElement que es el elemento al que el puntero del ratón se ha movido. De esta forma, en el evento mouseover, la propiedad toElement es idéntica a srcElement y en el evento mouseout, la propiedad fromElement es idéntica a srcElement.
En los navegadores que soportan el estándar DOM, solamente existe una propiedad denominada relatedTarget. En el evento mouseout, relatedTarget apunta al elemento al que se ha movido el ratón. En el evento mouseover, relatedTarget apunta al elemento desde el que se ha movido el puntero del ratón.
Cuando se pulsa un botón del ratón, la secuencia de eventos que se produce es la siguiente: mousedown, mouseup, click. Por tanto, la secuencia de eventos necesaria para llegar al doble click llega a ser tan compleja como la siguiente: mousedown, mouseup, click, mousedown, mouseup, click, dblclick.
6.5.2. Eventos de teclado
Los eventos que se incluyen en esta clasificación son los siguientes:
| Evento | Descripción |
|---|---|
keydown |
Se produce cuando se pulsa cualquier tecla del teclado. También se produce de forma continua si se mantiene pulsada la tecla |
keypress |
Se produce cuando se pulsa una tecla correspondiente a un carácter alfanumérico (no se tienen en cuenta telas como SHIFT, ALT, etc.). También se produce de forma continua si se mantiene pulsada la tecla |
keyup |
Se produce cuando se suelta cualquier tecla pulsada |
6.5.2.1. Propiedades
El objeto event contiene las siguientes propiedades para los eventos de teclado:
- La propiedad
keyCode - La propiedad
charCode(sólo DOM) - La propiedad
srcElement(Internet Explorer) otarget(DOM) - Las propiedades
shiftKey,ctrlKey,altKeyymetaKey(sólo DOM)
Cuando se pulsa una tecla correspondiente a un carácter alfanumérico, se produce la siguiente secuencia de eventos: keydown, keypress, keyup. Cuando se pulsa otro tipo de tecla, se produce la siguiente secuencia de eventos: keydown, keyup. Si se mantiene pulsada la tecla, en el primer caso se repiten de forma continua los eventos keydown y keypress y en el segundo caso, se repite el evento keydown de forma continua.
6.5.3. Eventos HTML
Los eventos HTML definidos se recogen en la siguiente tabla:
| Evento | Descripción |
|---|---|
load |
Se produce en el objeto window cuando la página se carga por completo. En el elemento <img> cuando se carga por completo la imagen. En el elemento <object> cuando se carga el objeto |
unload |
Se produce en el objeto window cuando la página desaparece por completo (al cerrar la ventana del navegador por ejemplo). En el elemento <object> cuando desaparece el objeto. |
abort |
Se produce en un elemento <object> cuando el usuario detiene la descarga del elemento antes de que haya terminado |
error |
Se produce en el objeto window cuando se produce un error de JavaScript. En el elemento <img> cuando la imagen no se ha podido cargar por completo y en el elemento <object> cuando el elemento no se carga correctamente |
select |
Se produce cuando se seleccionan varios caracteres de un cuadro de texto (<input> y <textarea>) |
change |
Se produce cuando un cuadro de texto (<input> y <textarea>) pierde el foco y su contenido ha variado. También se produce cuando varía el valor de un elemento <select> |
submit |
Se produce cuando se pulsa sobre un botón de tipo submit (<input type="submit">) |
reset |
Se produce cuando se pulsa sobre un botón de tipo reset (<input type="reset">) |
resize |
Se produce en el objeto window cuando se redimensiona la ventana del navegador |
scroll |
Se produce en cualquier elemento que tenga una barra de scroll, cuando el usuario la utiliza. El elemento <body> contiene la barra de scroll de la página completa |
focus |
Se produce en cualquier elemento (incluido el objeto window) cuando el elemento obtiene el foco |
blur |
Se produce en cualquier elemento (incluido el objeto window) cuando el elemento pierde el foco |
Uno de los eventos más utilizados es el evento load, ya que todas las manipulaciones que se realizan mediante DOM requieren que la página esté cargada por completo y por tanto, el árbol DOM se haya construido completamente.
El elemento <body> define las propiedades scrollLeft y scrollTop que se pueden emplear junto con el evento scroll.
6.5.4. Eventos DOM
Aunque los eventos de este tipo son parte de la especificación oficial de DOM, aún no han sido implementados en todos los navegadores. La siguiente tabla recoge los eventos más importantes de este tipo:
| Evento | Descripción |
|---|---|
DOMSubtreeModified |
Se produce cuando se añaden o eliminan nodos en el subárbol de un documento o elemento |
DOMNodeInserted |
Se produce cuando se añade un nodo como hijo de otro nodo |
DOMNodeRemoved |
Se produce cuando se elimina un nodo que es hijo de otro nodo |
DOMNodeRemovedFromDocument |
Se produce cuando se elimina un nodo del documento |
DOMNodeInsertedIntoDocument |
Se produce cuando se añade un nodo al documento |