HTML DOM Eventos
eventos DOM HTML permiten JavaScript para registrar diferentes controladores de eventos de elementos en un documento HTML.
Los eventos se utilizan normalmente en combinación con las funciones y la función no se ejecutarán antes de que ocurra el evento (such as when a user clicks a button) .
Tip: El modelo de eventos fue estandarizado por el W3C en DOM Level 2.
HTML DOM Eventos
DOM: Indica en que se introdujo DOM nivel la propiedad.
Eventos del ratón
| Evento | Descripción | DOM |
|---|---|---|
| al hacer clic | El evento se produce cuando el usuario hace clic sobre un elemento | 2 |
| OnContextMenu | El evento se produce cuando el usuario hace clic con en un elemento para abrir un menú contextual | 3 |
| ondblclick | El evento se produce cuando el usuario hace doble clic en un elemento | 2 |
| onMouseDown | El evento se produce cuando el usuario presiona un botón del ratón sobre un elemento | 2 |
| OnMouseEnter | El evento se produce cuando se mueve el puntero sobre un elemento | 2 |
| OnMouseLeave | El evento se produce cuando el puntero se mueve fuera de un elemento | 2 |
| onmousemove | El evento se produce cuando el puntero se mueve mientras está sobre un elemento | 2 |
| el ratón por encima | El evento se produce cuando se mueve el puntero sobre un elemento, o sobre uno de sus hijos | 2 |
| onmouseout | El evento se produce cuando un usuario mueve el puntero del ratón fuera de un elemento, o de uno de sus hijos | 2 |
| onmouseup | El evento se produce cuando el usuario suelta el botón del ratón sobre un elemento | 2 |
Eventos de teclado
| Evento | Descripción | DOM |
|---|---|---|
| onkeydown | El evento se produce cuando el usuario está presionando una tecla | 2 |
| onkeypress | El evento se produce cuando el usuario presiona una tecla | 2 |
| onkeyup | El evento se produce cuando el usuario suelta una tecla | 2 |
Marco de objeto / Eventos
| Evento | Descripción | DOM |
|---|---|---|
| onabort | El evento se produce cuando la carga de un recurso ha sido abortada | 2 |
| onbeforeunload | El evento se produce antes de que el documento está a punto de ser descargado | 2 |
| onerror | El evento se produce cuando se produce un error al cargar un archivo externo | 2 |
| onhashchange | El evento se produce cuando no ha habido cambios en la parte de anclaje de una URL | 3 |
| onload | El evento se produce cuando un objeto se ha cargado | 2 |
| onpageshow | El evento se produce cuando el usuario navega a una página web | 3 |
| onpagehide | El evento se produce cuando el usuario salga de una página web | 3 |
| onresize | El evento se produce cuando se cambia el tamaño de la vista del documento | 2 |
| onscroll | El evento se produce cuando se está desplazando la barra de desplazamiento de un elemento | 2 |
| onunload | El evento se produce una vez a la página ha descargado (por <body>) | 2 |
Eventos de formulario
| Evento | Descripción | DOM |
|---|---|---|
| en la falta de definición | El evento se produce cuando un elemento pierde el foco | 2 |
| onchange | El evento se produce cuando el contenido de un elemento de forma, la selección o el estado comprobado han cambiado (for <input>, <keygen>, <select>, and <textarea>) | 2 |
| enfocado | El evento se produce cuando un elemento obtiene el foco | 2 |
| onfocusin | El evento se produce cuando un elemento está a punto de obtener un enfoque | 2 |
| onfocusout | El evento se produce cuando un elemento está a punto de perder el foco | 2 |
| oninput | El evento se produce cuando un elemento recibe entrada de usuario | 3 |
| oninvalid | El evento se produce cuando un elemento no es válido | 3 |
| onreset | El evento se produce cuando se reinicializa un formulario | 2 |
| onsearch | El evento se produce cuando el usuario escribe algo en un campo de búsqueda (por <input = "buscar">) | 3 |
| onselect | El evento se produce después de que el usuario selecciona un texto (for <input> and <textarea>) | 2 |
| onsubmit | El evento se produce cuando se envía un formulario | 2 |
Arrastre y Eventos
| Evento | Descripción | DOM |
|---|---|---|
| ondrag | El evento se produce cuando un elemento está siendo arrastrado | 3 |
| ondragend | El evento se produce cuando el usuario ha terminado arrastrando un elemento | 3 |
| OnDragEnter | El evento se produce cuando el elemento arrastrado entra en el destino de colocación | 3 |
| OnDragLeave | El evento se produce cuando el elemento arrastrado sale del destino de colocación | 3 |
| ondragover | El evento se produce cuando el elemento arrastrado se encuentra sobre el destino de colocación | 3 |
| ondragstart | El evento se produce cuando el usuario comienza a arrastrar un elemento | 3 |
| ondrop | El evento se produce cuando el elemento arrastrado se coloca sobre el destino de colocación | 3 |
portapapeles Eventos
| Evento | Descripción | DOM |
|---|---|---|
| oncopy | El evento se produce cuando el usuario copia el contenido de un elemento | |
| oncut | El evento se produce cuando el usuario corta el contenido de un elemento | |
| onpaste | El evento se produce cuando el usuario pega algo de contenido en un elemento |
Imprimir Eventos
| Evento | Descripción | DOM |
|---|---|---|
| onafterprint | El evento se produce cuando una página ha empezado a imprimir, o si el cuadro de diálogo de impresión se ha cerrado | 3 |
| OnBeforePrint | El evento se produce cuando una página está a punto de ser impreso | 3 |
Media Eventos
| Evento | Descripción | DOM |
|---|---|---|
| onabort | El evento se produce cuando se interrumpe la carga de un medio de comunicación | 3 |
| oncanplay | El evento se produce cuando el navegador puede empezar a jugar los medios de comunicación (cuando se ha tamponada suficiente para empezar) | 3 |
| oncanplaythrough | El evento se produce cuando el navegador se puede jugar a través de los medios de comunicación sin parar para el búfer | 3 |
| ondurationchange | El evento se produce cuando se cambia la duración de los medios de comunicación | 3 |
| onemptied | El evento se produce cuando pasa algo malo y el archivo de los medios de comunicación es repentinamente inasequible (like unexpectedly disconnects) | 3 |
| onended | El evento se produce cuando los medios de comunicación tiene llegar al final (useful for messages like "thanks for listening") | 3 |
| onerror | El evento se produce cuando se produce un error durante la carga de un archivo multimedia | 3 |
| onloadeddata | El evento se produce cuando los datos de medios es cargado | 3 |
| onloadedmetadata | El evento se produce cuando los metadatos (like dimensions and duration) son loaded | 3 |
| onLoadStart | El evento se produce cuando el navegador empieza a buscar los medios de comunicación especificada | 3 |
| onPause | El evento se produce cuando los medios de comunicación está en pausa, ya sea por el usuario o mediante programación | 3 |
| onplay | El evento se produce cuando se ha iniciado los medios de comunicación o que ya no está en pausa | 3 |
| onplaying | El evento se produce cuando los medios de comunicación está jugando después de haber sido dejado en pausa o para el búfer | 3 |
| en progreso | El evento se produce cuando el navegador está en el proceso de obtención de los datos de los medios (downloading the media) | 3 |
| onratechange | El evento se produce cuando se cambia la velocidad de reproducción de los medios | 3 |
| onseeked | El evento se produce cuando el usuario ha terminado de mover / saltar a una nueva posición en los medios | 3 |
| onseeking | El evento se produce cuando el usuario empieza a mover / saltar a una nueva posición en los medios | 3 |
| onstalled | El evento se produce cuando el navegador está tratando de obtener datos de los medios, pero los datos no está disponible | 3 |
| onsuspend | El evento se produce cuando el navegador está intencionalmente no obtener datos de los medios | 3 |
| ontimeupdate | El evento se produce cuando la posición de juego ha cambiado (como cuando los usuarios avanza rápidamente a un punto diferente en los medios de comunicación) | 3 |
| onvolumechange | El evento se produce cuando el volumen de los medios de comunicación ha cambiado (incluye ajustar el volumen a "mudo") | 3 |
| onwaiting | El evento se produce cuando los medios de comunicación se ha detenido pero se espera que reanude (como cuando los medios de comunicación hace una pausa para amortiguar más datos) | 3 |
animación Eventos
| Evento | Descripción | DOM |
|---|---|---|
| animationend | El evento se produce cuando una animación CSS ha completado | 3 |
| animationiteration | El evento se produce cuando se repite una animación CSS | 3 |
| animationstart | El evento se produce cuando una animación CSS ha comenzado | 3 |
Eventos de transición
| Evento | Descripción | DOM |
|---|---|---|
| transitionend | El evento se produce cuando una transición CSS ha completado | 3 |
Eventos enviados por el servidor
| Evento | Descripción | DOM |
|---|---|---|
| onerror | El evento se produce cuando se produce un error con el origen del evento | |
| onmessage | El evento se produce cuando se recibe un mensaje a través de la fuente del evento | |
| AlAbrir | El evento se produce cuando se abre una conexión con la fuente del evento |
Eventos Varios
| Evento | Descripción | DOM |
|---|---|---|
| onmessage | El evento se produce cuando se recibe un mensaje a través o desde un objeto (WebSocket, Web Worker, Event Source or a child frame or a parent window) | 3 |
| onMouseWheel | Obsoleto. Usar la onwheel evento en vez | |
| ononline | El evento se produce cuando el navegador comienza a trabajar en línea | 3 |
| onoffline | El evento se produce cuando el navegador comienza a trabajar fuera de línea | 3 |
| onpopstate | El evento se produce cuando la historia de la ventana cambia | 3 |
| en el programa | El evento se produce cuando un <menu> elemento se muestra como un menú contextual | 3 |
| onstorage | El evento se produce cuando se actualiza un área de almacenamiento Web | 3 |
| ontoggle | El evento se produce cuando el usuario abre o cierra el <details> elemento | 3 |
| onwheel | El evento se produce cuando la rueda del ratón rollos arriba o hacia abajo sobre un elemento | 3 |
táctiles Eventos
| Evento | Descripción | DOM |
|---|---|---|
| ontouchcancel | El evento se produce cuando se interrumpe el toque | |
| ontouchend | El evento se produce cuando un dedo se retira de una pantalla táctil | |
| onTouchMove | El evento se produce cuando un dedo se arrastra por la pantalla | |
| ontouchstart | El evento se produce cuando se coloca un dedo en una pantalla táctil |
de objeto de evento
constantes
| Constante | Descripción | DOM |
|---|---|---|
| CAPTURING_PHASE | La fase evento actual es la fase de captura (1) | 1 |
| AT_TARGET | El evento actual se encuentra en la fase de destino, es decir, que está siendo evaluado en el destino del evento (2) | 2 |
| BUBBLING_PHASE | La fase evento actual es la fase de propagación (3) | 3 |
propiedades
| Propiedad | Descripción | DOM |
|---|---|---|
| burbujas | Devuelve si o no un evento específico es un evento de propagación | 2 |
| cancelable | Indica si o no un evento puede haber impedido su acción predeterminada | 2 |
| currentTarget | Devuelve el elemento cuyo detectores de eventos disparado el evento | 2 |
| defaultPrevented | Devuelve si el preventDefault() método fue llamado para el evento | 3 |
| eventPhase | Devuelve el cual está siendo evaluado fase del flujo del evento | 2 |
| IsTrusted | Devuelve si o no un evento es de confianza | 3 |
| objetivo | Devuelve el elemento que desencadenó el evento | 2 |
| timeStamp | Devuelve el tiempo (in milliseconds relative to the epoch) a la que se ha creado el evento | 2 |
| tipo | Devuelve el nombre del evento | 2 |
| ver | Devuelve una referencia al objeto de la ventana donde el evento ocurrió | 2 |
métodos
| Método | Descripción | DOM |
|---|---|---|
| preventDefault() | Cancela el evento si es cancelable, lo que significa que la acción predeterminada que pertenece al evento no ocurrirá | 2 |
| stopImmediatePropagation() | Evita que otros oyentes de un mismo hecho de ser llamado | 3 |
| stopPropagation() | Previene la propagación adicional de un evento durante el flujo evento | 2 |
objeto MouseEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| tecla Alt | Devuelve si el "ALT" ha pulsado la tecla cuando se activa el evento de ratón | 2 |
| botón | Devuelve en qué botón del ratón se presiona cuando se activa el evento de ratón | 2 |
| botones | Devuelve en qué botones del ratón se presiona cuando se activa el evento de ratón | 3 |
| clientX | Devuelve la coordenada horizontal del puntero del ratón, con relación a la ventana actual, cuando se activa el evento de ratón | 2 |
| clientY | Devuelve la coordenada vertical del puntero del ratón, con relación a la ventana actual, cuando se activa el evento de ratón | 2 |
| ctrlKey | Devuelve si el "CTRL" ha pulsado la tecla cuando se activa el evento de ratón | 2 |
| detalle | Devuelve un número que indica cuántas veces se hizo clic en el ratón | 2 |
| metakey | Indica si la "META" ha pulsado la tecla cuando se activa un evento | 2 |
| pageX | Devuelve la coordenada horizontal del puntero del ratón, en relación con el documento, cuando se activa el evento de ratón | |
| pageY | Devuelve la coordenada vertical del puntero del ratón, en relación con el documento, cuando se activa el evento de ratón | |
| relatedTarget | Devuelve el elemento relacionado con el elemento que desencadenó el evento de ratón | 2 |
| screenX | Devuelve la coordenada horizontal del puntero del ratón, con respecto a la pantalla, cuando se activa un evento | 2 |
| screenY | Devuelve la coordenada vertical del puntero del ratón, con respecto a la pantalla, cuando se activa un evento | 2 |
| tecla Shift | Devuelve si el "SHIFT" ha pulsado la tecla cuando se activa un evento | 2 |
| cual | Devuelve en qué botón del ratón se presiona cuando se activa el evento de ratón | 2 |
objeto KeyboardEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| tecla Alt | Devuelve si el "ALT" ha pulsado la tecla cuando se activa el evento clave | 2 |
| ctrlKey | Devuelve si el "CTRL" ha pulsado la tecla cuando se activa el evento clave | 2 |
| charCode | Devuelve el código de caracteres Unicode de la tecla que activa el evento onkeypress | 2 |
| llave | Devuelve el valor de la tecla representada por el evento | 3 |
| clave | Devuelve el código de caracteres Unicode de la tecla que activa el evento onkeypress, o el código de clave de Unicode de la tecla que activa la onkeydown o evento onkeyup | 2 |
| ubicación | Devuelve la ubicación de una tecla del teclado o el dispositivo | 3 |
| metakey | Indica si la "meta" se ha pulsado cuando se activa el evento clave | 2 |
| tecla Shift | Devuelve si el "SHIFT" ha pulsado la tecla cuando se activa el evento clave | 2 |
| cual | Devuelve el código de caracteres Unicode de la tecla que activa el evento onkeypress, o el código de clave de Unicode de la tecla que activa la onkeydown o evento onkeyup | 2 |
objeto HashChangeEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| NEWURL | Devuelve la URL del documento, después de que el hachís se ha cambiado | |
| OLDURL | Devuelve la URL del documento, antes de que se cambió el hash |
objeto PageTransitionEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| persistido | Devuelve si la página web se almacena en caché por el navegador |
objeto FocusEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| relatedTarget | Devuelve el elemento relacionado con el elemento que desencadenó el evento | 3 |
objeto AnimationEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| animationName | Devuelve el nombre de la animación | |
| tiempo transcurrido | Devuelve el número de segundos una animación ha estado funcionando |
objeto TransitionEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| nombre de la propiedad | Devuelve el nombre de la propiedad CSS asociada con la transición | |
| tiempo transcurrido | Devuelve el número de segundos que una transición ha estado funcionando |
objeto WheelEvent
| Propiedad | Descripción | DOM |
|---|---|---|
| deltaX | Devuelve la cantidad de desplazamiento horizontal de una rueda de ratón (x-axis) | 3 |
| deltaY | Devuelve la cantidad de desplazamiento vertical de una rueda del ratón (y-axis) | 3 |
| deltaZ | Devuelve la cantidad de desplazamiento de la rueda del ratón para el eje z | 3 |
| deltaMode | Devuelve un número que representa la unidad de mediciones para valores delta (pixels, lines or pages) | 3 |