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:
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.
El objeto event
contiene las siguientes propiedades para los eventos de ratón:
type
srcElement
(Internet Explorer) o target
(DOM)shiftKey
, ctrlKey
, altKey
y metaKey
(sólo DOM)button
(sólo en los eventos mousedown
, mousemove
, mouseout
, mouseover
y mouseup
) 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
.
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 |
El objeto event contiene las siguientes propiedades para los eventos de teclado:
keyCode
charCode
(sólo DOM)srcElement
(Internet Explorer) o target
(DOM)shiftKey
, ctrlKey
, altKey
y metaKey
(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.
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
.
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 |