Atributos de Eventos Globales en HTML

Un evento ocurre cuando el navegador reacciona a una acción concreta — el usuario hace clic con el ratón, pulsa una tecla, reproduce un vídeo, envía un formulario, redimensiona la ventana, etc. Para responder a un evento, se adjunta un manejador: un fragmento de script (normalmente JavaScript) que se ejecuta cuando el evento se dispara.

HTML permite adjuntar un manejador directamente en el marcado mediante un atributo de evento. Todos los atributos de esta página comienzan con on seguido del nombre del evento (onclick, onkeydown, onsubmit, …). Todos se añadieron en HTML5 y aceptan código JavaScript como valor:

<button onclick="alert('Clicked!')">Click me</button>

Estos atributos de evento son globales — la mayoría pueden colocarse en cualquier elemento — pero cada uno solo tiene sentido en el contexto adecuado (los atributos de formulario en los controles de formulario, los atributos de medios en <audio>/<video>, etc.).

Advertencia

Los atributos on* en línea están desaconsejados en el código moderno. Mezclan el comportamiento con el marcado, no permiten adjuntar fácilmente más de un manejador y son bloqueados por una Content Security Policy estricta. Es preferible usar addEventListener en un script separado, lo que mantiene HTML y JavaScript separados y permite que varios manejadores escuchen el mismo evento:

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", () => {
    alert("Clicked!");
  });
</script>

Las tablas a continuación listan los atributos de evento por categoría. Para un tratamiento más completo de cómo funcionan los eventos en el navegador, consulta JavaScript Events y los relacionados HTML Global Attributes.

Atributos de Eventos de Ventana

Los eventos de ventana se desencadenan para el objeto window. Generalmente se colocan en la etiqueta <body>, donde el navegador los mapea sobre window.

Atributo	Descripción
onafterprint	Se dispara después de que el documento ha sido impreso.
onbeforeprint	Se dispara antes de que el documento sea impreso.
onbeforeunload	Se dispara antes de que el documento sea descargado (p. ej., el usuario está a punto de abandonar la página).
onblur	Se dispara cuando la ventana pierde el foco (el usuario cambia a otra pestaña o aplicación).
onerror	Se dispara cuando ocurre un error al cargar el documento o un recurso.
onhashchange	Se dispara cuando el fragmento (la parte de la URL después de `#`) cambia.
onload	Se dispara cuando toda la página — imágenes, CSS y scripts — ha terminado de cargar.
onmessage	Se dispara cuando la ventana recibe un mensaje (p. ej., desde `postMessage`).
onoffline	Se dispara cuando el navegador pierde su conexión de red.
ononline	Se dispara cuando el navegador recupera su conexión de red.
onpagehide	Se dispara cuando el usuario navega fuera de la página.
onpageshow	Se dispara cuando el usuario navega hacia la página.
onpopstate	Se dispara cuando cambia la entrada activa del historial.
onresize	Se dispara cuando se redimensiona la ventana.
onstorage	Se dispara cuando se actualiza un área de almacenamiento web (`localStorage`/`sessionStorage`).
onunload	Se dispara cuando la página se descarga (el documento está siendo eliminado).

<body onload="document.body.style.background = '#eef'">
  <p>This page changes its background colour once it has loaded.</p>
</body>

Atributos de Eventos de Formulario

Un evento que puede ocurrir dentro de un formulario se denomina evento de formulario. Los eventos de formulario ocurren cuando el usuario abre o cierra un formulario, se desplaza entre formularios o trabaja con datos en un formulario.

Los atributos de eventos de formulario pueden aplicarse a todos los elementos HTML, pero generalmente se usan con controles de formulario como <input>, <select> y <textarea>.

Atributo	Descripción
onblur	Se dispara cuando un elemento pierde el foco (el usuario presiona Tab o hace clic fuera de un control).
onchange	Se dispara cuando el valor de un control ha cambiado y el control pierde el foco.
oncontextmenu	Se dispara cuando se abre el menú contextual (clic derecho) sobre el elemento.
onfocus	Se dispara cuando un elemento gana el foco.
oninput	Se dispara inmediatamente cada vez que cambia el valor de un control.
oninvalid	Se dispara cuando un control enviado falla la validación de restricciones.
onreset	Se dispara cuando un formulario se restablece a sus valores iniciales.
onsearch	Se dispara cuando el usuario realiza una búsqueda en un campo `<input type="search">`.
onselect	Se dispara cuando el usuario selecciona texto dentro de un `<input>` o `<textarea>`.
onsubmit	Se dispara cuando se envía un formulario.

<form onsubmit="alert('Submitting…'); return false;">
  <input type="text" name="name"
         onfocus="this.style.background = '#ffd'"
         onblur="this.style.background = ''"
         placeholder="Your name">
  <button type="submit">Send</button>
</form>

Devolver false desde onsubmit (o llamar a event.preventDefault() en JavaScript) evita que el formulario sea enviado realmente — útil durante las pruebas.

Atributos de Eventos de Teclado

Los atributos de eventos de teclado pueden aplicarse a todos los elementos HTML.

Atributo	Descripción
onkeydown	Se dispara cuando se presiona una tecla. Se repite mientras la tecla está pulsada.
onkeypress	Se dispara cuando se presiona una tecla de carácter. Obsoleto — usa `onkeydown` en su lugar.
onkeyup	Se dispara cuando se suelta una tecla presionada.

<input type="text"
       onkeyup="document.getElementById('echo').textContent = this.value"
       placeholder="Type here">
<p>You typed: <span id="echo"></span></p>

Atributos de Eventos de Ratón

Los eventos de ratón ocurren cuando el ratón interactúa con el documento HTML. Los atributos pueden aplicarse a todos los elementos HTML.

Atributo	Descripción
onclick	Se dispara cuando se hace clic en el elemento.
ondblclick	Se dispara cuando se hace doble clic en el elemento.
ondrag	Se dispara repetidamente mientras un elemento está siendo arrastrado.
ondragend	Se dispara cuando termina una operación de arrastre.
ondragenter	Se dispara cuando un elemento arrastrado entra en un destino de colocación válido.
ondragleave	Se dispara cuando un elemento arrastrado sale de un destino de colocación válido.
ondragover	Se dispara repetidamente mientras un elemento arrastrado está sobre un destino de colocación válido.
ondragstart	Se dispara cuando el usuario comienza a arrastrar un elemento.
ondrop	Se dispara cuando un elemento arrastrado se suelta sobre un destino de colocación válido.
onmousedown	Se dispara cuando se presiona un botón del ratón sobre el elemento.
onmousemove	Se dispara cada vez que el puntero se mueve mientras está sobre el elemento.
onmouseout	Se dispara cuando el puntero sale del elemento.
onmouseover	Se dispara cuando el puntero se mueve sobre el elemento.
onmouseup	Se dispara cuando se suelta un botón del ratón sobre el elemento.
onmousewheel	Obsoleto — usa `onwheel` en su lugar.
onscroll	Se dispara cuando se desplaza la barra de desplazamiento de un elemento.
onwheel	Se dispara cuando la rueda del ratón gira hacia arriba o hacia abajo sobre el elemento.

<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
     style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
  Move the mouse here
</div>

Atributos de Eventos del Portapapeles

Atributo	Descripción
oncopy	Se dispara cuando se copia el contenido de un elemento.
oncut	Se dispara cuando se corta el contenido de un elemento.
onpaste	Se dispara cuando se pega contenido en un elemento.

Atributos de Eventos de Medios

Los eventos de medios ocurren en elementos multimedia, como vídeo, imagen y audio. Los atributos pueden aplicarse a cualquier elemento HTML, pero generalmente se usan dentro de los elementos audio, embed, img, object y video.

Atributo	Descripción
onabort	Se dispara cuando se interrumpe la carga del medio.
oncanplay	Se dispara cuando el navegador ha almacenado suficiente en búfer para comenzar a reproducir.
oncanplaythrough	Se dispara cuando el navegador estima que puede reproducir sin detenerse para almacenar en búfer.
oncuechange	Se dispara cuando cambia la pista de texto activa (p. ej., subtítulos o leyendas).
ondurationchange	Se dispara cuando cambia la duración del medio.
onemptied	Se dispara cuando el medio queda vacío (p. ej., se pierde la conexión).
onended	Se dispara cuando la reproducción llega al final del medio.
onerror	Se dispara cuando ocurre un error al cargar el medio.
onloadeddata	Se dispara cuando se ha cargado el fotograma actual de los datos multimedia.
onloadedmetadata	Se dispara cuando se han cargado los metadatos (duración, dimensiones, …).
onloadstart	Se dispara cuando el navegador comienza a cargar el medio.
onpause	Se dispara cuando la reproducción se pausa.
onplay	Se dispara cuando la reproducción comienza o se reanuda.
onplaying	Se dispara cuando la reproducción está en curso (por ejemplo, tras el almacenamiento en búfer).
onprogress	Se dispara periódicamente mientras el navegador carga el medio.
onratechange	Se dispara cuando cambia la velocidad de reproducción (p. ej., avance rápido).
onseeked	Se dispara cuando termina una operación de búsqueda.
onseeking	Se dispara cuando comienza una operación de búsqueda.
onstalled	Se dispara cuando el navegador intenta, pero no puede, obtener datos del medio.
onsuspend	Se dispara cuando la carga del medio se pausa intencionalmente.
ontimeupdate	Se dispara a medida que cambia la posición de reproducción durante la reproducción.
onvolumechange	Se dispara cuando cambia el volumen (incluido el silenciamiento).
onwaiting	Se dispara cuando la reproducción se detiene porque el siguiente fotograma aún no está almacenado en búfer.

Otros Eventos

Atributo	Descripción
ontoggle	Se dispara cuando el usuario abre o cierra un elemento `<details>`.

Información

Algunos atributos que pueden aparecer en referencias antiguas — onredo, onundo y onshow — nunca formaron parte del HTML estándar o no son compatibles con los navegadores, por lo que se han omitido aquí.

Práctica

¿Qué son los atributos de eventos globales en HTML?

Atributos on*, disponibles en la mayoría de los elementos HTML, que ejecutan JavaScript cuando se dispara un evento coincidente.Atributos que envían datos al servidor cuando ocurre un evento.Manejadores de eventos que solo funcionan en elementos de formulario.Un reemplazo de addEventListener que los navegadores ya no soportan.