El objeto Event

En Javascript los eventos se implementan como un objeto Event. Este objeto implementa la interfaz de eventos del DOM.

Cuando se produce alguna acción o cambio en el entorno del documeto web se genera un evento en el DOM. Esto provoca la creación de un objeto de nombre event que hereda los métodos y propiedades de Event, y además pueden añadirse otros específicos del evento en particular.

Por ejemplo: cuando se produce un evento de teclado por pulsar una tecla, Javascript crea el objeto event, con el constructor KeyBoardEvent que posee una serie de propiedades específicas (como información sobre las teclas), además de las heredadas de Event.

Este objeto es el argumento que se envía a la función que maneja el evento. A través de sus propiedades se puede obtener toda la información necesaria para actuar y hacer lo que se haya programado.

function verTecla(e){

window.alert("Tecla pulsada "+e.code+"\n"+e.target+"\n"+e.constructor.name)

}

document.body.addEventListener("keydown", verTecla)

Para probar este ejemplo crea una página web simple con este script y verás que al pulsar una tecla se abre una ventana de aviso con el mensaje sobre la tecla pulsada, el objeto destino del evento (en este caso body) y por último el nombre del constructor de este evento.

En este caso se trata de un evento de tipo KeyEvent, y entre sus propiedades están code, específica del objeto, y target, proveniente del constructor Event. La acción que se intercepta es keydown (evento onkeydown).

Resumen

La interfaz de eventos del modelo de objetos DOM se implementa en Javascript mediante el objeto genérico Event.

A partir de Event se crean varios tipos de constructores de eventos que añaden a las propiedades de Event las suyas propias, específicas de la acción que los dispara.

Al producirse un evento en Javascript se crea un objeto de nombre event de alguno de los tipos predefinidos:

  • AnimationEvent
  • ClipboardEvent
  • DragEvent
  • Event
  • FocusEvent
  • HashChangeEvent
  • InputEvent
  • KeyboardEvent
  • MouseEvent
  • WheelEvent
  • PageTransitionEvent
  • PopStateEvent
  • ProgressEvent
  • StorageEvent
  • TouchEvent
  • TransitionEvent
  • UiEvent