HTML DOM Evento
Eventos HTML DOM
Los eventos HTML DOM permiten que Javascript registre diferentes manejadores de eventos en elementos de documentos HTML.
Los eventos generalmente se usan en combinación con funciones, ¡las funciones no se ejecutarán antes de que ocurra el evento! (como cuando el usuario hace clic en un botón).
Consejo:El modelo de eventos está especificado en el evento DOM Nivel 2 de W3C.
Eventos HTML DOM
DOM：Indica el nivel de propiedad DOM utilizado.
Eventos del ratón
| Propiedades |
Descripción |
DOM |
| onclick |
Manejador de eventos que se invoca cuando el usuario hace clic en un objeto. |
2 |
| oncontextmenu |
Se activa cuando el usuario hace clic con el botón derecho del ratón para abrir el menú contextual. |
|
| ondblclick |
Manejador de eventos que se invoca cuando el usuario hace doble clic en un objeto. |
2 |
| onmousedown |
Se presiona el botón del ratón. |
2 |
| onmouseenter |
Se activa cuando el puntero del ratón se mueve sobre un elemento. |
2 |
| onmouseleave |
Se activa cuando el puntero del ratón sale de un elemento. |
2 |
| onmousemove |
El ratón se mueve. |
2 |
| onmouseover |
El ratón se mueve sobre un elemento. |
2 |
| onmouseout |
El ratón se aleja de un elemento. |
2 |
| onmouseup |
Se suelta el botón del ratón. |
2 |
Eventos del teclado
| Propiedades |
Descripción |
DOM |
| onkeydown |
Se presiona una tecla del teclado. |
2 |
| onkeypress |
Se presiona y suelta una tecla del teclado. |
2 |
| onkeyup |
Se suelta una tecla del teclado. |
2 |
Eventos de marco/objeto (Frame/Object)
| Propiedades |
Descripción |
DOM |
| onabort |
Se interrumpe la carga de una imagen. ( <object>) |
2 |
| onbeforeunload |
Este evento se activa cuando se está a punto de abandonar la página (recargar o cerrar). |
2 |
| onerror |
Ocurre un error al cargar un documento o una imagen. ( <object>, <body> y <frameset>) |
|
| onhashchange |
Este evento se activa cuando se modifica la parte del ancla de la URL actual. |
|
| onload |
Se completa la carga de una página o una imagen. |
2 |
| onpageshow |
Este evento se activa cuando el usuario visita la página. |
|
| onpagehide |
Este evento se activa cuando el usuario abandona la página web actual y navega a otra página. |
|
| onresize |
Se redimensiona la ventana o el marco. |
2 |
| onscroll |
Evento que ocurre cuando se desplaza el documento. |
2 |
| onunload |
El usuario sale de la página. ( <body> y <frameset>) |
2 |
Eventos de formulario
| Propiedades |
Descripción |
DOM |
| onblur |
Se activa cuando un elemento pierde el foco. |
2 |
| onchange |
Este evento se activa cuando cambia el contenido de un elemento de formulario ( <input>, <keygen>, <select> y <textarea>) |
2 |
| onfocus |
Se activa cuando un elemento obtiene el foco. |
2 |
| onfocusin |
Se activa cuando un elemento está a punto de obtener el foco. |
2 |
| onfocusout |
Se activa cuando un elemento está a punto de perder el foco. |
2 |
| oninput |
Se activa cuando un elemento recibe entrada del usuario. |
3 |
| onreset |
Se activa cuando se restablece el formulario. |
2 |
| onsearch |
Se activa cuando el usuario ingresa texto en un campo de búsqueda ( <input="search">) |
|
| onselect |
Se activa cuando el usuario selecciona texto ( <input> y <textarea>) |
2 |
| onsubmit |
Se activa cuando se envía el formulario. |
2 |
Eventos del portapapeles
| Propiedades |
Descripción |
DOM |
| oncopy |
Este evento se activa cuando el usuario copia el contenido de un elemento. |
|
| oncut |
Este evento se activa cuando el usuario corta el contenido de un elemento. |
|
| onpaste |
Este evento se activa cuando el usuario pega el contenido de un elemento. |
|
Eventos de impresión
| Propiedades |
Descripción |
DOM |
| onafterprint |
Este evento se activa cuando la página ya ha comenzado a imprimirse o cuando la ventana de impresión ya se ha cerrado. |
|
| onbeforeprint |
Este evento se activa cuando la página está a punto de comenzar a imprimirse. |
|
Eventos de arrastre
| Evento |
Descripción |
DOM |
| ondrag |
Este evento se activa mientras se está arrastrando un elemento. |
|
| ondragend |
Este evento se activa cuando el usuario completa el arrastre de un elemento. |
|
| ondragenter |
Este evento se activa cuando el elemento arrastrado entra en el objetivo de colocación. |
|
| ondragleave |
Este evento se activa cuando el elemento arrastrado sale del objetivo de colocación. |
|
| ondragover |
Este evento se activa cuando el elemento arrastrado está sobre el objetivo de colocación. |
|
| ondragstart |
Este evento se activa cuando el usuario comienza a arrastrar un elemento. |
|
| ondrop |
Este evento se activa cuando el elemento arrastrado se coloca en el área de destino. |
|
Eventos multimedia (Media)
| Evento |
Descripción |
DOM |
| onabort |
El evento se activa cuando se detiene la carga del video/audio (audio/video). |
|
| oncanplay |
El evento se activa cuando el usuario puede comenzar a reproducir el video/audio (audio/video). |
|
| oncanplaythrough |
El evento se activa cuando el video/audio (audio/video) puede reproducirse normalmente sin pausas ni almacenamiento en búfer. |
|
| ondurationchange |
El evento se activa cuando cambia la duración del video/audio (audio/video). |
|
| onemptied |
Se activa cuando la lista de reproducción actual está vacía. |
|
| onended |
El evento se activa cuando finaliza la reproducción del video/audio (audio/video). |
|
| onerror |
El evento se activa cuando ocurre un error durante la carga de datos de video/audio (audio/video). |
|
| onloadeddata |
El evento se activa cuando el navegador carga el fotograma actual del video/audio (audio/video). |
|
| onloadedmetadata |
El evento se activa después de que se cargan los metadatos del video/audio (audio/video) especificado. |
|
| onloadstart |
El evento se activa cuando el navegador comienza a buscar el video/audio (audio/video) especificado. |
|
| onpause |
El evento se activa cuando el video/audio (audio/video) se pausa. |
|
| onplay |
El evento se activa cuando el video/audio (audio/video) comienza a reproducirse. |
|
| onplaying |
El evento se activa cuando el video/audio (audio/video) se pausa o está listo para reanudar la reproducción después del almacenamiento en búfer. |
|
| onprogress |
El evento se activa cuando el navegador descarga el video/audio (audio/video) especificado. |
|
| onratechange |
El evento se activa cuando cambia la velocidad de reproducción del video/audio (audio/video). |
|
| onseeked |
El evento se activa después de que el usuario reubica la posición de reproducción del video/audio (audio/video). |
|
| onseeking |
El evento se activa cuando el usuario comienza a reubicar la posición de reproducción del video/audio (audio/video). |
|
| onstalled |
El evento se activa cuando el navegador obtiene datos multimedia, pero los datos multimedia no están disponibles. |
|
| onsuspend |
El evento se activa cuando el navegador interrumpe la lectura de datos multimedia. |
|
| ontimeupdate |
El evento se activa cuando cambia la posición de reproducción actual. |
|
| onvolumechange |
El evento se activa cuando cambia el volumen. |
|
| onwaiting |
El evento se activa cuando el video necesita almacenamiento en búfer para reproducir el siguiente fotograma. |
|
Eventos de animación
| Evento |
Descripción |
DOM |
| animationend |
Este evento se activa cuando la animación CSS termina de reproducirse. |
|
| animationiteration |
Este evento se activa cuando la animación CSS se reproduce repetidamente. |
|
| animationstart |
Este evento se activa cuando la animación CSS comienza a reproducirse. |
|
Eventos de transición
| Evento |
Descripción |
DOM |
| transitionend |
Este evento se activa después de que CSS completa la transición. |
|
Otros eventos
| Evento |
Descripción |
DOM |
| onmessage |
Este evento se activa cuando se recibe un mensaje a través de o desde un objeto (WebSocket, Web Worker, Event Source o un marco secundario o ventana principal). |
|
| onmousewheel |
Obsoleto.Usaronwheelevento en su lugar |
|
| ononline |
Este evento se activa cuando el navegador comienza a trabajar en línea. |
|
| onoffline |
Este evento se activa cuando el navegador comienza a trabajar sin conexión. |
|
| onpopstate |
Este evento se activa cuando cambia el historial de navegación (objeto history) de la ventana. |
|
| onshow |
Este evento se activa cuando el elemento <menu> se muestra en el menú contextual. |
|
| onstorage |
Este evento se activa cuando se actualiza Web Storage (almacenamiento web HTML 5). |
|
| ontoggle |
Este evento se activa cuando el usuario abre o cierra el elemento <details>. |
|
| onwheel |
Este evento se activa cuando la rueda del ratón se desplaza hacia arriba o hacia abajo sobre un elemento. |
|
| visibilitychange |
Este evento se utiliza para detectar si el estado de visibilidad de la página actual ha cambiado. |
|
Objeto de evento
Constantes
| Variables estáticas |
Descripción |
DOM |
| CAPTURING-PHASE |
La fase actual del evento es la fase de captura (1) |
1 |
| AT-TARGET |
El evento actual está en la fase de destino, evaluando el evento objetivo (1) |
2 |
| BUBBLING-PHASE |
El evento actual está en la fase de burbujeo (3) |
3 |
Propiedades
| Propiedades |
Descripción |
DOM |
| bubbles |
Devuelve un valor booleano que indica si el evento es de tipo burbujeante. |
2 |
| cancelable |
Devuelve un valor booleano que indica si el evento tiene una acción predeterminada cancelable. |
2 |
| currentTarget |
Devuelve el elemento cuyo listener de eventos desencadenó el evento. |
2 |
| eventPhase |
Devuelve la fase actual de propagación del evento. |
2 |
| target |
Devuelve el elemento que desencadenó este evento (el nodo de destino del evento). |
2 |
| timeStamp |
Devuelve la fecha y hora en que se generó el evento. |
2 |
| type |
Devuelve el nombre del evento representado por el objeto Event actual. |
2 |
Métodos
| Métodos |
Descripción |
DOM |
| initEvent() |
Inicializa las propiedades de un objeto Event recién creado. |
2 |
| preventDefault() |
Notifica al navegador que no ejecute la acción predeterminada asociada con el evento. |
2 |
| stopPropagation() |
Deja de despachar el evento. |
2 |
Objeto de evento objetivo
Métodos
| Métodos |
Descripción |
DOM |
| addEventListener() |
Permite registrar un evento de escucha en el evento de destino (IE8 = attachEvent()) |
2 |
| dispatchEvent() |
Permite enviar el evento al listener (IE8 = fireEvent()) |
2 |
| removeEventListener() |
Ejecuta una vez un evento de escucha registrado en el destino del evento (IE8 = detachEvent()) |
2 |
Objeto de escucha de eventos
Métodos
| Métodos |
Descripción |
DOM |
| handleEvent() |
Registra cualquier objeto como manejador de eventos. |
2 |
Objeto de evento de documento
Métodos
| Métodos |
Descripción |
DOM |
| createEvent() |
|
2 |
Objeto de evento de ratón/teclado
Propiedades
| Propiedades |
Descripción |
DOM |
| altKey |
Devuelve si la tecla "ALT" fue presionada cuando se activó el evento. |
2 |
| button |
Devuelve qué botón del mouse fue presionado cuando se activó el evento. |
2 |
| clientX |
Devuelve la coordenada horizontal del puntero del mouse cuando se activó el evento. |
2 |
| clientY |
Devuelve la coordenada vertical del puntero del mouse cuando se activó el evento. |
2 |
| ctrlKey |
Devuelve si la tecla "CTRL" fue presionada cuando se activó el evento. |
2 |
Location |
Devuelve la posición de la tecla en el dispositivo. |
3 |
| charCode | Devuelve el código de carácter del valor de la tecla que activó el evento onkeypress. | 2 |
| key | Devuelve el identificador de la tecla cuando se presiona una tecla. | 3 |
| keyCode | Devuelve el código de carácter del valor de la tecla que activa el evento onkeypress, o el código de la tecla de los eventos onkeydown u onkeyup. | 2 |
| which | Devuelve el código de carácter del valor de la tecla que activa el evento onkeypress, o el código de la tecla de los eventos onkeydown u onkeyup. | 2 |
| metaKey |
Devuelve si la tecla "meta" fue presionada cuando se activó el evento. |
2 |
| relatedTarget |
Devuelve el nodo relacionado con el nodo de destino del evento. |
2 |
| screenX |
Devuelve la coordenada horizontal del puntero del mouse cuando se activa un evento. |
2 |
| screenY |
Devuelve la coordenada vertical del puntero del mouse cuando se activa un evento. |
2 |
| shiftKey |
Devuelve si la tecla "SHIFT" fue presionada cuando se activó el evento. |
2 |
Métodos
| Métodos |
Descripción |
W3C |
| initMouseEvent() |
Inicializa los valores del objeto de evento de mouse. |
2 |
| initKeyboardEvent() |
Inicializa los valores del objeto de evento de teclado. |
3 |
Otras extensiones