Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.

View in English Always switch to English

Event

Baseline
Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Nota: Esta característica está disponible en Web Workers.

La interfaz Event representa un evento que ocurre en un EventTarget.

Un evento puede dispararse por una acción del usuario, como hacer clic con el ratón o pulsar una tecla, o bien lo generan las API para representar el progreso de una tarea asíncrona. También puede dispararse mediante programación, por ejemplo, al llamar al método HTMLElement.click() de un elemento, o al definir el evento y enviarlo a un destino específico usando EventTarget.dispatchEvent().

Existen muchos tipos de eventos, y algunos de ellos usan otras interfaces basadas en la interfaz principal Event. La propia interfaz Event contiene las propiedades y los métodos comunes a todos los eventos.

Muchos elementos del DOM pueden configurarse para aceptar (o "escuchar") estos eventos y ejecutar código en respuesta, con el fin de procesarlos (o "manejarlos"). Los manejadores de eventos suelen conectarse (o "asociarse") a distintos elementos HTML (como <button>, <div>, <span>, etc.) mediante EventTarget.addEventListener(); esto generalmente sustituye al uso de los antiguos atributos de manejador de eventos de HTML. Además, cuando se añaden correctamente, estos manejadores también pueden desconectarse si es necesario usando removeEventListener().

Nota: Un mismo elemento puede tener varios de estos manejadores, incluso para exactamente el mismo evento, sobre todo si módulos de código independientes los asocian, cada uno con sus propios fines. (Por ejemplo, una página web con un módulo de publicidad y otro de estadísticas que monitorizan la reproducción de un vídeo).

Cuando hay muchos elementos anidados, cada uno con sus propios manejadores, el procesamiento de eventos puede volverse muy complicado. Esto ocurre sobre todo cuando un elemento padre recibe exactamente el mismo evento que sus hijos porque, "espacialmente", se solapan y el evento ocurre técnicamente en ambos, y el orden de procesamiento de dichos eventos depende de la configuración de Propagación de eventos de cada manejador activado.

Interfaces basadas en Event

A continuación se muestra una lista de las interfaces basadas en la interfaz principal Event, con enlaces a su documentación en la referencia de API de MDN.

Ten en cuenta que los nombres de todas las interfaces de eventos terminan en "Event".

Constructor

Event()

Crea un objeto Event y lo devuelve a quien lo llama.

Propiedades de instancia

Event.bubbles Read only

Un valor booleano que indica si el evento se propaga (burbujea) hacia arriba a través del DOM.

Event.cancelable Read only

Un valor booleano que indica si el evento es cancelable.

Event.composed Read only

Un valor booleano que indica si el evento puede propagarse a través del límite entre el shadow DOM y el DOM regular.

Event.currentTarget Read only

Una referencia al destino registrado actualmente para el evento. Es el objeto al que se tiene previsto enviar el evento en este momento. Es posible que haya cambiado a lo largo del trayecto mediante la reorientación.

Event.defaultPrevented Read only

Indica si la llamada a event.preventDefault() canceló el evento.

Event.eventPhase Read only

Indica qué fase del flujo del evento se está procesando. Es uno de los siguientes números: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.

Event.isTrusted Read only

Indica si el evento fue iniciado por el navegador (tras un clic del usuario, por ejemplo) o por un script (utilizando un método de creación de eventos, por ejemplo).

Event.srcElement Read only

Un alias de la propiedad Event.target. Usa Event.target en su lugar.

Event.target Read only

Una referencia al objeto al que se envió originalmente el evento.

Event.timeStamp Read only

Un DOMHighResTimeStamp que representa el momento en que se creó el evento, medido en milisegundos relativos al origen de tiempo del objeto global correspondiente.

Event.type Read only

El nombre que identifica el tipo del evento.

Propiedades heredadas y no estándar

Event.cancelBubble

Un alias histórico de Event.stopPropagation(), que es el que debes usar. Si le asignas el valor true antes de salir de un manejador de eventos, se impide la propagación del evento.

Event.explicitOriginalTarget Read only

El destino original explícito del evento.

Event.originalTarget Read only

El destino original del evento, antes de cualquier reorientación.

Event.returnValue

Una propiedad histórica que aún se admite para que los sitios existentes sigan funcionando. Usa Event.preventDefault() y Event.defaultPrevented en su lugar.

Event.scoped Read only

Un valor booleano que indica si el evento se propagará a través del shadow root hacia el DOM estándar. Usa composed en su lugar.

Métodos de instancia

Event.composedPath()

Devuelve la ruta del evento (un array de objetos en los que se invocarán los detectores de eventos). No incluye nodos de los shadow trees si el shadow root se creó con su ShadowRoot.mode en modo cerrado.

Event.preventDefault()

Cancela el evento (si es cancelable).

Event.stopImmediatePropagation()

Para este evento concreto, impide que se invoque cualquier otro detector de eventos. Esto incluye tanto los detectores asociados al mismo elemento como los asociados a elementos que se recorrerán más adelante (por ejemplo, durante la fase de captura).

Event.stopPropagation()

Detiene la propagación del evento más allá del punto actual en el DOM.

Métodos obsoletos

Event.initEvent()

Inicializa el valor de un Event ya creado. Si el evento ya se ha enviado, este método no hace nada. Usa en su lugar el constructor (Event()).

Especificaciones

Especificación
DOM
# interface-event

Compatibilidad con navegadores

Véase también