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".
AnimationEventAudioProcessingEventBeforeUnloadEventBlobEventClipboardChangeEventClipboardEventCloseEventCompositionEventCustomEventDeviceMotionEventDeviceOrientationEventDragEventErrorEventFetchEventFocusEventFontFaceSetLoadEventFormDataEventGamepadEventHashChangeEventHIDInputReportEventIDBVersionChangeEventInputEventKeyboardEventMediaStreamEventMessageEventMouseEventMutationEventOfflineAudioCompletionEventPageTransitionEventPaymentRequestUpdateEventPointerEventPopStateEventProgressEventRTCDataChannelEventRTCPeerConnectionIceEventStorageEventSubmitEventTimeEventTouchEventTrackEventTransitionEventUIEventWebGLContextEventWheelEvent
Constructor
Event()-
Crea un objeto
Eventy lo devuelve a quien lo llama.
Propiedades de instancia
Event.bubblesRead only-
Un valor booleano que indica si el evento se propaga (burbujea) hacia arriba a través del DOM.
Event.cancelableRead only-
Un valor booleano que indica si el evento es cancelable.
Event.composedRead 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.currentTargetRead 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.defaultPreventedRead only-
Indica si la llamada a
event.preventDefault()canceló el evento. Event.eventPhaseRead 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.isTrustedRead 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.srcElementRead only-
Un alias de la propiedad
Event.target. UsaEvent.targeten su lugar. Event.targetRead only-
Una referencia al objeto al que se envió originalmente el evento.
Event.timeStampRead only-
Un
DOMHighResTimeStampque representa el momento en que se creó el evento, medido en milisegundos relativos al origen de tiempo del objeto global correspondiente. Event.typeRead 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 valortrueantes de salir de un manejador de eventos, se impide la propagación del evento. Event.explicitOriginalTargetRead only-
El destino original explícito del evento.
Event.originalTargetRead 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()yEvent.defaultPreventeden su lugar. Event.scopedRead only-
Un valor booleano que indica si el evento se propagará a través del shadow root hacia el DOM estándar. Usa
composeden 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.modeen 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> |