Saltar al contenido

Atributos globales de eventos

Un evento ocurre cuando el navegador reacciona a una acción particular del usuario. El usuario genera un evento al hacer clic en un botón del mouse, reproducir un video, subir un documento o una imagen, o realizar otras acciones en un sitio web.

Para reaccionar a un evento, se le asigna un controlador. Un controlador es una forma de ejecutar un script (por ejemplo, JavaScript) en caso de acciones del usuario. Hay muchas formas de adjuntar un controlador, y una de ellas es configurarlo en HTML con atributos.

A continuación, puedes encontrar una tabla de atributos de eventos usados para iniciar acciones específicas.

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

Atributos de eventos de ventana

Los eventos de ventana se activan para el objeto window. Estos son atributos globales que pueden usarse en cualquier elemento, aunque se aplican con mayor frecuencia a la etiqueta <body>.

AttributeDescription
onafterprintSe ejecuta cuando se imprime el documento. Nuevo atributo en HTML5.
onbeforeprintSe ejecuta antes de imprimir el documento. Nuevo atributo en HTML5.
onbeforeunloadSe ejecuta cuando el documento está a punto de descargarse (cuando el usuario está a punto de salir de la página antes de que se cargue). Nuevo atributo en HTML5.
onblurSe ejecuta cuando una ventana pierde el foco.
onerrorSe ejecuta cuando ocurre un error al descargar el documento. Nuevo atributo en HTML5.
onhashchangeSe ejecuta cuando cambia el ancla en la URL de una página web (el ancla va después de #). Nuevo atributo en HTML5.
onloadSe ejecuta cuando el contenido de una página web (imágenes, estilos CSS y scripts) se carga por completo.
onmessageSe ejecuta cuando se activa un mensaje. Nuevo atributo en HTML5.
onofflineSe ejecuta cuando el navegador funciona sin conexión. Nuevo atributo en HTML5.
ononlineSe ejecuta cuando el navegador funciona en línea. Nuevo atributo en HTML5.
onpagehideSe ejecuta cuando un usuario abandona la página web. Nuevo atributo en HTML5.
onpageshowSe ejecuta cuando un usuario navega a una página web. Nuevo atributo en HTML5.
onpopstateSe ejecuta cuando cambia el historial de la ventana. Nuevo atributo en HTML5.
onredoSe ejecuta cuando se usa la opción “Redo” (se revierte la última acción). Nuevo atributo en HTML5.
onresizeSe ejecuta cuando se cambia el tamaño de una ventana. Nuevo atributo en HTML5.
onstorageSe ejecuta cuando se actualiza el almacenamiento web. Nuevo atributo en HTML5.
onundoSe ejecuta cuando se cancela la última acción (comando “undo”). Nuevo atributo en HTML5.
onunloadSe ejecuta cuando una página web se descarga (se cierra). Nuevo atributo en HTML5.

Atributos de eventos de formulario

Un evento que puede ocurrir dentro de un formulario se llama evento de formulario. Los eventos de formulario ocurren cuando un usuario abre o cierra un formulario, se mueve 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 elementos de formularios HTML.

AttributeDescription
onblurSe ejecuta cuando un elemento de formulario pierde el foco.
onchangeSe ejecuta cuando cambia el valor del elemento.
oncontextmenuSe ejecuta cuando se muestra el menú contextual. Nuevo atributo en HTML5.
onfocusSe ejecuta cuando un elemento obtiene el foco.
oninputSe ejecuta cuando un elemento recibe entrada del usuario. Nuevo atributo en HTML5.
oninvalidSe ejecuta si un elemento de entrada no es válido. Nuevo atributo en HTML5.
onresetSe ejecuta cuando se restablece un formulario (todos los controles dentro del formulario se establecen en sus valores iniciales). Nuevo atributo en HTML5.
onsearchSe ejecuta cuando el usuario escribe algo en un campo de búsqueda (para <input type="search">).
onselectSe ejecuta cuando se selecciona algún texto en un elemento.
onsubmitSe ejecuta cuando se envía un formulario.

Atributos de eventos de teclado

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

AttributeDescription
onkeydownSe ejecuta cuando el usuario presiona cualquier tecla del teclado.
onkeypressSe ejecuta cuando se presiona una tecla. (Obsoleto/Desaconsejado. No funciona con Alt, Ctrl, Shift, Esc, PrScr, etc.)
onkeyupSe ejecuta cuando se suelta una tecla presionada.

Atributos de eventos de mouse

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

AttributeDescription
onclickSe ejecuta cuando se hace clic en un botón del mouse.
ondblclickSe ejecuta cuando se hace doble clic en un botón del mouse.
ondragSe ejecuta cuando un elemento está siendo arrastrado. Nuevo atributo en HTML5.
ondragendSe ejecuta cuando un elemento ha sido arrastrado. Nuevo atributo en HTML5.
ondragenterSe ejecuta cuando un elemento arrastrado entra en un destino de colocación válido. Nuevo atributo en HTML5.
ondragleaveSe ejecuta cuando un elemento arrastrado sale de un destino de colocación válido. Nuevo atributo en HTML5.
ondragoverSe ejecuta cuando un elemento arrastrado se arrastra sobre un destino de colocación válido (cada pocos cientos de milisegundos). Nuevo atributo en HTML5.
ondragstartSe ejecuta cuando el usuario comienza a arrastrar un elemento. Nuevo atributo en HTML5.
ondropSe ejecuta cuando el usuario suelta un elemento arrastrado. Nuevo atributo en HTML5.
onmousedownSe ejecuta cuando se presiona un botón del mouse.
onmousemoveSe ejecuta cuando el puntero del mouse se mueve sobre el elemento.
onmouseoutSe ejecuta cuando el puntero del mouse sale de un elemento.
onmouseoverSe ejecuta cuando el puntero del mouse se mueve sobre un elemento.
onmouseupSe ejecuta cuando se suelta un botón del mouse.
onmousewheelSe ejecuta cuando la rueda del mouse gira hacia arriba o hacia abajo sobre un elemento. Atributo obsoleto (usa el atributo onwheel en su lugar).
onscrollSe ejecuta cuando se desplaza la barra de desplazamiento de un elemento. Nuevo atributo en HTML5.
onwheelSe ejecuta cuando la rueda del mouse gira hacia arriba o hacia abajo sobre un elemento. Nuevo atributo en HTML5.

Atributos de eventos del portapapeles

AttributeDescription
oncopySe ejecuta cuando se copia el contenido de un elemento.
oncutSe ejecuta cuando se corta el contenido de un elemento.
onpasteSe ejecuta cuando se pega el contenido de un elemento.

Atributos de eventos multimedia

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

AttributeDescription
onabortSe ejecuta cuando se aborta la carga de un audio/video. Nuevo atributo en HTML5.
oncanplaySe ejecuta cuando el archivo está listo para comenzar a reproducirse (ha almacenado suficiente en búfer para empezar a reproducirse). Nuevo atributo en HTML5.
oncanplaythroughSe ejecuta cuando el archivo está listo para reproducirse de principio a fin sin detenerse para almacenar en búfer. Nuevo atributo en HTML5.
oncuechangeSe ejecuta cuando cambia la duración del medio. Nuevo atributo en HTML5.
onemptiedSe ejecuta cuando ocurre algo y el archivo no está disponible (por ejemplo, cuando se pierde la conexión a Internet). Nuevo atributo en HTML5.
onendedSe ejecuta cuando un archivo multimedia llega al final. Nuevo atributo en HTML5.
onerrorSe ejecuta cuando ocurre un error al cargar el archivo. Nuevo atributo en HTML5.
onloadeddataSe ejecuta cuando se cargan los datos multimedia. Nuevo atributo en HTML5.
onloadedmetadataSe ejecuta cuando se cargan los metadatos (tamaño de los archivos multimedia, duración, etc.). Nuevo atributo en HTML5.
onloadstartSe ejecuta cuando el navegador comienza a descargar datos multimedia. Nuevo atributo en HTML5.
onpauseSe ejecuta cuando el archivo multimedia se pausa. Nuevo atributo en HTML5.
onplaySe ejecuta cuando el archivo está listo para comenzar a reproducirse. Nuevo atributo en HTML5.
onplayingSe ejecuta cuando el archivo comienza a reproducirse. Nuevo atributo en HTML5.
onprogressSe ejecuta cuando el navegador está en proceso de obtener datos multimedia. Nuevo atributo en HTML5.
onratechangeSe ejecuta cada vez que cambia el modo de reproducción (por ejemplo, cuando el usuario cambia al modo de avance rápido o cámara lenta). Nuevo atributo en HTML5.
onseekedSe ejecuta cuando termina la búsqueda. Nuevo atributo en HTML5.
onseekingSe ejecuta cuando el atributo seeking de las etiquetas <audio> o <video> se establece en true, indicando que la búsqueda está activa. Nuevo atributo en HTML5.
onstalledSe ejecuta cuando el navegador no puede obtener datos multimedia por cualquier motivo. Nuevo atributo en HTML5.
onsuspendSe ejecuta cuando el navegador ya ha comenzado a extraer datos multimedia, pero el proceso se suspendió antes de que los datos se cargaran por completo. Nuevo atributo en HTML5.
ontimeupdateSe ejecuta cuando cambia la posición de reproducción. Nuevo atributo en HTML5.
onvolumechangeSe ejecuta cada vez que cambia el volumen (incluye establecer el volumen en "mute"). Nuevo atributo en HTML5.
onwaitingSe ejecuta cuando el archivo multimedia está suspendido, pero está a punto de reanudarse (por ejemplo, cuando el archivo se pausa para almacenar en búfer). Nuevo atributo en HTML5.

Otros eventos

AttributeDescription
onerrorSe ejecuta cuando ocurre un error al descargar un archivo externo.
onshowSe ejecuta cuando el <menu> se muestra como un menú contextual. Nuevo atributo en HTML5.
ontoggleSe ejecuta cuando un usuario abre o cierra el <details>. Nuevo atributo en HTML5.

Practice

What are global event attributes in HTML?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.