Ver índice de contenidos del libro

6.5. Tipos de eventos

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) o target (DOM)
  • Las propiedades shiftKey, ctrlKey, altKey y metaKey (sólo DOM)
  • La propiedad 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.

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) o target (DOM)
  • Las propiedades 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.

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