Eventos de HTML DOM

Eventos de HTML DOM

Los eventos del DOM HTML permiten que JavaScript registre diferentes programadores de eventos en los elementos del documento HTML.

Los eventos se utilizan comúnmente junto con funciones, las cuales no se ejecutarán antes de que ocurra el evento (por ejemplo, cuando el usuario hace clic en un botón).

Para obtener tutoriales sobre eventos, aprende nuestro Tutoriales de eventos de JavaScript.

evento Descripción Pertenece
abort Este evento se produce cuando se detiene la carga de los medios.
afterprint Este evento se produce cuando se comienza a imprimir la página o se cierra el cuadro de diálogo de impresión. Evento
animationend Este evento se produce cuando la animación CSS se completa. EventoAnimación
animationiteration Este evento se produce durante la repetición de la animación CSS. EventoAnimación
animationstart Este evento se produce cuando comienza la animación CSS. EventoAnimación
beforeprint Este evento se produce cuando se va a imprimir la página. Evento
beforeunload Este evento se produce antes de que el documento se descargue.
blur Este evento se produce cuando el elemento pierde el foco. EventoFoco
canplay Este evento se produce cuando el navegador puede comenzar a reproducir los medios. Evento
canplaythrough Este evento se produce cuando el navegador puede comenzar a reproducir los medios sin detener la缓冲. Evento
change Este evento se produce cuando el contenido, la selección o el estado seleccionado del elemento de formulario cambia. Evento
click Este evento se produce cuando el usuario hace clic en el elemento. EventoRatón
contextmenu Este evento se produce cuando el usuario hace clic con el botón derecho en un elemento para abrir el menú contextual. EventoRatón
copy Este evento se produce cuando el usuario copia el contenido del elemento. ClipboardEvent
cut Este evento se produce cuando el usuario corta el contenido del elemento. ClipboardEvent
dblclick Este evento se produce cuando el usuario hace doble clic en el elemento. EventoRatón
drag Este evento se produce mientras se arrastra el elemento. DragEvent
dragend Este evento ocurre después de que el usuario complete el arrastre de un elemento. DragEvent
dragenter Este evento ocurre cuando el elemento arrastrado entra en un objetivo de colocación. DragEvent
dragleave Este evento ocurre cuando el elemento arrastrado se aleja de un objetivo de colocación. DragEvent
dragover Este evento ocurre cuando el elemento arrastrado está sobre un objetivo de colocación. DragEvent
dragstart Este evento ocurre cuando el usuario comienza a arrastrar un elemento. DragEvent
drop Este evento ocurre cuando se coloca un elemento arrastrado en un objetivo de colocación. DragEvent
durationchange Este evento ocurre cuando cambia la duración del medio. Evento
ended Este evento ocurre cuando el medio se reproduce hasta el final. Evento
error Este evento ocurre después de que se produce un error al cargar un archivo externo.
focus Este evento ocurre cuando un elemento recibe el enfoque. EventoFoco
focusin Este evento ocurre justo antes de que un elemento reciba el enfoque. EventoFoco
focusout Este evento ocurre justo antes de que un elemento pierda el enfoque. EventoFoco
fullscreenchange Este evento ocurre cuando un elemento se muestra en modo de pantalla completa. Evento
fullscreenerror Este evento ocurre cuando un elemento no se puede mostrar en modo de pantalla completa. Evento
hashchange Este evento ocurre cuando cambia la parte de ancla de la URL. HashChangeEvent
input Este evento ocurre cuando un elemento recibe entrada del usuario.
invalid Este evento ocurre cuando un elemento es inválido. Evento
keydown Este evento ocurre mientras el usuario presiona una tecla. EventoTeclado
keypress Este evento ocurre cuando el usuario presiona una tecla. EventoTeclado
keyup Este evento ocurre cuando el usuario suelta una tecla. EventoTeclado
load Este evento ocurre cuando el objeto se ha cargado.
loadeddata Este evento ocurre después de que se hayan cargado los datos del medio. Evento
loadedmetadata Este evento ocurre mientras se carga la metadatos (por ejemplo, dimensiones y duración). Evento
loadstart Este evento ocurre cuando el navegador comienza a buscar el medio especificado. EventoProgreso
message Este evento ocurre mientras se recibe un mensaje a través de este origen de eventos. Evento
mousedown Este evento ocurre cuando el usuario presiona el botón del ratón sobre un elemento. EventoRatón
mouseenter Este evento ocurre cuando el puntero se mueve sobre un elemento. EventoRatón
mouseleave Este evento ocurre cuando el puntero sale de un elemento. EventoRatón
mousemove Este evento ocurre cuando el puntero se mueve sobre un elemento. EventoRatón
mouseout Este evento ocurre cuando el usuario mueve el puntero del ratón fuera de un elemento o uno de sus elementos hijos. EventoRatón
mouseover Este evento ocurre cuando el puntero se mueve sobre un elemento o uno de sus elementos hijos. EventoRatón
mouseup Este evento ocurre cuando el usuario suelta el botón del ratón sobre un elemento. EventoRatón
mousewheel No se recomienda su uso.Por favor, utilice wheel Evento. WheelEvent
offline Este evento se produce cuando el navegador comienza a trabajar en modo desconectado. Evento
online Este evento se produce cuando el navegador comienza a trabajar en línea. Evento
open Este evento se produce cuando se abre la conexión con el origen del evento. Evento
pagehide Este evento se produce cuando el usuario sale de una página web para navegar. PageTransitionEvent
pageshow Este evento se produce cuando el usuario navega a una página web. PageTransitionEvent
paste Este evento se produce cuando el usuario pega algún contenido en un elemento. ClipboardEvent
pause Este evento se produce cuando el medio se pausa o se pausa de manera programática por el usuario. Evento
play Este evento se produce cuando el medio se inicia o ya no está en pausa. Evento
playing Este evento se produce cuando se reproduce el medio después de que se ha pausado o detenido para buffering. Evento
popstate Este evento se produce cuando cambia el historial de la ventana. EventoPopState
progress Este evento se produce cuando el navegador está en el proceso de obtener datos de medios. Evento
ratechange Este evento se produce cuando cambia la velocidad de reproducción del medio. Evento
reset Este evento se produce al restablecer el formulario. Evento
resize Este evento se produce al ajustar el tamaño de la vista del documento.
scroll Este evento se produce al desplazar la barra de desplazamiento del elemento de desplazamiento.
search Este evento se produce cuando el usuario ingresa contenido en el campo de búsqueda. Evento
seeked Este evento se produce cuando el usuario completa el movimiento/salto a una nueva posición en el medio. Evento
seeking Este evento se produce cuando el usuario comienza a mover/saltar a una nueva posición en el medio. Evento
select Este evento se produce después de que el usuario selecciona texto (para <input> y <textarea>).
show Este evento se produce cuando el elemento <menu> se muestra como un menú contextual. Evento
stalled Este evento se produce cuando el navegador intenta obtener datos de medios pero no están disponibles. Evento
storage Este evento se produce cuando se actualiza el área de almacenamiento web. EventoAlmacenamiento
submit Este evento se produce cuando se envía el formulario. Evento
suspend Este evento se produce cuando el navegador no intente obtener datos de medios intencionalmente. Evento
timeupdate Este evento se produce cuando cambia la posición de reproducción. Evento
toggle Este evento se produce cuando el usuario abre o cierra el elemento <details>. Evento
touchcancel Este evento se produce cuando la táctil se interrumpe. EventoToque
touchend Este evento se produce cuando el dedo se desprende de la pantalla táctil. EventoToque
touchmove Este evento se produce cuando el dedo se arrastra en la pantalla. EventoToque
touchstart Este evento se produce cuando el dedo está en la pantalla táctil. EventoToque
transitionend Este evento se produce cuando se completa la conversión CSS. EventoTransición
unload Este evento ocurre después de que la página se descargue (para <body>).
volumechange Este evento ocurre cuando se cambia el volumen del medio. Evento
waiting Este evento ocurre cuando el medio se ha detenido pero se espera que se recupere. Evento
wheel Este evento ocurre cuando la rueda del ratón se desplaza hacia arriba o hacia abajo en el elemento. WheelEvent

Atributos y métodos de eventos HTML DOM

Atributo/método Descripción Pertenece
altKey Devuelve si se presionó la tecla 'ALT' al desencadenar el evento de ratón. EventoRatón
altKey Devuelve si se presionó la tecla 'ALT' al desencadenar el evento de pulsación de tecla.
animationName Devuelve el nombre de la animación. EventoAnimación
bubbles Devuelve si el evento específico es un evento de burbuja. Evento
button Devuelve el botón del ratón que estaba presionado cuando se desencadenó el evento. EventoRatón
buttons Devuelve el botón del ratón que estaba presionado cuando se desencadenó el evento. EventoRatón
cancelBubble Establece o devuelve si el evento debe propagarse hacia la jerarquía superior.
cancelable Devuelve si el evento se puede evitar su operación predeterminada. Evento
changeTouches Devuelve una lista de todos los objetos de toque cuyos estados cambiaron entre el toque anterior y el toque actual. EventoToque
charCode Devuelve el código Unicode de la tecla que desencadenó el evento onkeypress. EventoTeclado
clientX Devuelve la coordenada horizontal del puntero del ratón en relación con la ventana actual al desencadenar el evento de ratón.
clientY Devuelve la coordenada vertical del puntero del ratón en relación con la ventana actual al desencadenar el evento de ratón.
clipboardData Devuelve un objeto que contiene los datos afectados por la operación del portapapeles. ClipboardData
code Devuelve el código de la tecla que desencadenó el evento. EventoTeclado
composed Indica si el evento puede transmitirse desde el Shadow DOM al DOM general. Evento
composedPath() Devuelve la ruta del evento.
createEvent() Crear un nuevo evento. Evento
ctrlKey Devuelve si se presionó la tecla 'CTRL' al desencadenar el evento de ratón. EventoRatón
ctrlKey Devuelve si se presionó la tecla 'CTRL' en el evento de pulsación de tecla o evento de ratón.
currentTarget Devuelve el elemento que desencadenó el evento del escucha de eventos. Evento
data Devuelve el carácter insertado. InputEvent
dataTransfer Devuelve un objeto que contiene los datos arrastrados o insertados/eliminados.
defaultPrevented Devuelve si se llamó al método preventDefault() para el evento. Evento
deltaX Devuelve la cantidad de desplazamiento horizontal de la rueda del ratón (eje x). WheelEvent
deltaY Devuelve la cantidad de desplazamiento vertical de la rueda del ratón (eje y). WheelEvent
deltaZ Devuelve la cantidad de desplazamiento en el eje Z de la rueda del ratón. WheelEvent
deltaMode 返回数字，代表增量值（像素、线或页面）的度量单位。 WheelEvent
detail 返回数字，指示鼠标被单击了多少次。 UiEvento
elapsedTime 返回动画已运行的秒数。 EventoAnimación
elapsedTime 返回过渡已运行的秒数。 　
eventPhase 返回当前正在评估事件流处于哪个阶段。 Evento
getModifierState() 返回包含目标范围的数组，此范围将受到插入/删除的影响。 EventoRatón
getTargetRanges() 返回包含目标范围的数组，此范围将受到插入/删除的影响。 InputEvent
inputType 返回更改的类型（即 "inserting" 或 "deleting"）。 InputEvent
isComposing 返回事件的状态是否正在构成。
isTrusted 返回事件是否受信任。 Evento
key 返回事件表示的键的键值。 EventoTeclado
key 返回更改后的存储项的键。 EventoAlmacenamiento
keyCode 返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。 EventoTeclado
location 返回键盘或设备上按键的位置。 EventoTeclado
lengthComputable 返回进度的长度是否可计算。 EventoProgreso
loaded 返回已加载的工作量。 EventoProgreso
metaKey 返回事件触发时是否按下了 "META" 键。 EventoRatón
metaKey 返回按键事件触发时是否按下了 "META" 键。
MovementX 返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标。 EventoRatón
MovementY 返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标。 EventoRatón
newURL 返回更改 hash 后的文档 URL。 HasChangeEvent
newValue 返回更改后的存储项目的新值。 EventoAlmacenamiento
offsetX 返回鼠标指针相对于目标元素边缘位置的水平坐标。 EventoRatón
offsetY 返回鼠标指针相对于目标元素边缘位置的垂直坐标。 EventoRatón
oldURL 返回更改 hash 前的文档 URL。 HasChangeEvent
oldValue 返回更改后的存储项目的旧值。 EventoAlmacenamiento
onemptied 当发生不良情况且媒体文件突然不可用时，发生此事件。 　
pageX 返回触发鼠标事件时鼠标指针相对于文档的水平坐标。 EventoRatón
pageY 返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。 EventoRatón
persisted 是否返回网页被浏览器缓存。 PageTransitionEvent
preventDefault() Si es posible, cancela el evento sin ejecutar la acción predeterminada del evento. Evento
propertyName Devuelve el nombre de la propiedad CSS asociada con la animación o transición.
pseudoElement Devuelve el nombre del pseudo-elemento de la animación o transición.
region EventoRatón
relatedTarget Devuelve el elemento relacionado con el elemento que desencadenó el evento de ratón. EventoRatón
relatedTarget Devuelve el elemento relacionado con el elemento que desencadenó el evento. EventoFoco
repeat Devuelve si se está presionando repetidamente una tecla. EventoTeclado
screenX Devuelve la coordenada horizontal del puntero del ratón o de la ventana en relación con la pantalla. EventoRatón
screenY Devuelve la coordenada vertical del puntero del ratón o de la ventana en relación con la pantalla. EventoRatón
shiftKey Devuelve si se presionó la tecla "SHIFT" cuando se desencadenó el evento. EventoRatón
shiftKey Devuelve si se presionó la tecla "SHIFT" cuando se desencadenó el evento de pulsación de tecla.
state Devuelve un objeto que contiene una copia del registro de historial. EventoPopState
stopImme...() Evita que otros listeners del mismo evento sean llamados. Evento
stopPropagation() Evita que el evento se propague más en la secuencia de eventos. Evento
almacenamientoArea Devuelve un objeto que representa el objeto de almacenamiento afectado. EventoAlmacenamiento
target Devuelve el elemento que desencadenó el evento. Evento
targetTouches Devuelve una lista de TouchList de TouchObject que contienen todos los puntos de toque que aún están en contacto con la superficie. EventoToque
timeStamp Devuelve el tiempo en milisegundos desde el epoch al momento de la creación del evento. Evento
total Devuelve la cantidad total de trabajo que se va a cargar. EventoProgreso
touches Devuelve una lista de todos los objetos touch que están en contacto con la superficie en el momento actual. EventoToque
type Devuelve el nombre del evento. Evento
url Devuelve la URL del documento donde se encuentra el proyecto cambiado. EventoAlmacenamiento
which Devuelve el botón del ratón que estaba presionado cuando se desencadenó el evento. EventoRatón
which Devuelve el código de carácter Unicode de la tecla que desencadenó el evento onkeypress, o el código de tecla Unicode de la tecla que desencadenó los eventos onkeydown o onkeyup. EventoTeclado
vista Devuelve una referencia al objeto Window donde ocurrió el evento. UiEvento