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.
<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>.
| Attribute | Description |
|---|---|
| onafterprint | Se ejecuta cuando se imprime el documento. Nuevo atributo en HTML5. |
| onbeforeprint | Se ejecuta antes de imprimir el documento. Nuevo atributo en HTML5. |
| onbeforeunload | Se 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. |
| onblur | Se ejecuta cuando una ventana pierde el foco. |
| onerror | Se ejecuta cuando ocurre un error al descargar el documento. Nuevo atributo en HTML5. |
| onhashchange | Se ejecuta cuando cambia el ancla en la URL de una página web (el ancla va después de #). Nuevo atributo en HTML5. |
| onload | Se ejecuta cuando el contenido de una página web (imágenes, estilos CSS y scripts) se carga por completo. |
| onmessage | Se ejecuta cuando se activa un mensaje. Nuevo atributo en HTML5. |
| onoffline | Se ejecuta cuando el navegador funciona sin conexión. Nuevo atributo en HTML5. |
| ononline | Se ejecuta cuando el navegador funciona en línea. Nuevo atributo en HTML5. |
| onpagehide | Se ejecuta cuando un usuario abandona la página web. Nuevo atributo en HTML5. |
| onpageshow | Se ejecuta cuando un usuario navega a una página web. Nuevo atributo en HTML5. |
| onpopstate | Se ejecuta cuando cambia el historial de la ventana. Nuevo atributo en HTML5. |
| onredo | Se ejecuta cuando se usa la opción “Redo” (se revierte la última acción). Nuevo atributo en HTML5. |
| onresize | Se ejecuta cuando se cambia el tamaño de una ventana. Nuevo atributo en HTML5. |
| onstorage | Se ejecuta cuando se actualiza el almacenamiento web. Nuevo atributo en HTML5. |
| onundo | Se ejecuta cuando se cancela la última acción (comando “undo”). Nuevo atributo en HTML5. |
| onunload | Se 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.
| Attribute | Description |
|---|---|
| onblur | Se ejecuta cuando un elemento de formulario pierde el foco. |
| onchange | Se ejecuta cuando cambia el valor del elemento. |
| oncontextmenu | Se ejecuta cuando se muestra el menú contextual. Nuevo atributo en HTML5. |
| onfocus | Se ejecuta cuando un elemento obtiene el foco. |
| oninput | Se ejecuta cuando un elemento recibe entrada del usuario. Nuevo atributo en HTML5. |
| oninvalid | Se ejecuta si un elemento de entrada no es válido. Nuevo atributo en HTML5. |
| onreset | Se ejecuta cuando se restablece un formulario (todos los controles dentro del formulario se establecen en sus valores iniciales). Nuevo atributo en HTML5. |
| onsearch | Se ejecuta cuando el usuario escribe algo en un campo de búsqueda (para <input type="search">). |
| onselect | Se ejecuta cuando se selecciona algún texto en un elemento. |
| onsubmit | Se 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.
| Attribute | Description |
|---|---|
| onkeydown | Se ejecuta cuando el usuario presiona cualquier tecla del teclado. |
| onkeypress | Se ejecuta cuando se presiona una tecla. (Obsoleto/Desaconsejado. No funciona con Alt, Ctrl, Shift, Esc, PrScr, etc.) |
| onkeyup | Se 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.
| Attribute | Description |
|---|---|
| onclick | Se ejecuta cuando se hace clic en un botón del mouse. |
| ondblclick | Se ejecuta cuando se hace doble clic en un botón del mouse. |
| ondrag | Se ejecuta cuando un elemento está siendo arrastrado. Nuevo atributo en HTML5. |
| ondragend | Se ejecuta cuando un elemento ha sido arrastrado. Nuevo atributo en HTML5. |
| ondragenter | Se ejecuta cuando un elemento arrastrado entra en un destino de colocación válido. Nuevo atributo en HTML5. |
| ondragleave | Se ejecuta cuando un elemento arrastrado sale de un destino de colocación válido. Nuevo atributo en HTML5. |
| ondragover | Se ejecuta cuando un elemento arrastrado se arrastra sobre un destino de colocación válido (cada pocos cientos de milisegundos). Nuevo atributo en HTML5. |
| ondragstart | Se ejecuta cuando el usuario comienza a arrastrar un elemento. Nuevo atributo en HTML5. |
| ondrop | Se ejecuta cuando el usuario suelta un elemento arrastrado. Nuevo atributo en HTML5. |
| onmousedown | Se ejecuta cuando se presiona un botón del mouse. |
| onmousemove | Se ejecuta cuando el puntero del mouse se mueve sobre el elemento. |
| onmouseout | Se ejecuta cuando el puntero del mouse sale de un elemento. |
| onmouseover | Se ejecuta cuando el puntero del mouse se mueve sobre un elemento. |
| onmouseup | Se ejecuta cuando se suelta un botón del mouse. |
| onmousewheel | Se ejecuta cuando la rueda del mouse gira hacia arriba o hacia abajo sobre un elemento. Atributo obsoleto (usa el atributo onwheel en su lugar). |
| onscroll | Se ejecuta cuando se desplaza la barra de desplazamiento de un elemento. Nuevo atributo en HTML5. |
| onwheel | Se ejecuta cuando la rueda del mouse gira hacia arriba o hacia abajo sobre un elemento. Nuevo atributo en HTML5. |
Atributos de eventos del portapapeles
| Attribute | Description |
|---|---|
| oncopy | Se ejecuta cuando se copia el contenido de un elemento. |
| oncut | Se ejecuta cuando se corta el contenido de un elemento. |
| onpaste | Se 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.
| Attribute | Description |
|---|---|
| onabort | Se ejecuta cuando se aborta la carga de un audio/video. Nuevo atributo en HTML5. |
| oncanplay | Se ejecuta cuando el archivo está listo para comenzar a reproducirse (ha almacenado suficiente en búfer para empezar a reproducirse). Nuevo atributo en HTML5. |
| oncanplaythrough | Se ejecuta cuando el archivo está listo para reproducirse de principio a fin sin detenerse para almacenar en búfer. Nuevo atributo en HTML5. |
| oncuechange | Se ejecuta cuando cambia la duración del medio. Nuevo atributo en HTML5. |
| onemptied | Se ejecuta cuando ocurre algo y el archivo no está disponible (por ejemplo, cuando se pierde la conexión a Internet). Nuevo atributo en HTML5. |
| onended | Se ejecuta cuando un archivo multimedia llega al final. Nuevo atributo en HTML5. |
| onerror | Se ejecuta cuando ocurre un error al cargar el archivo. Nuevo atributo en HTML5. |
| onloadeddata | Se ejecuta cuando se cargan los datos multimedia. Nuevo atributo en HTML5. |
| onloadedmetadata | Se ejecuta cuando se cargan los metadatos (tamaño de los archivos multimedia, duración, etc.). Nuevo atributo en HTML5. |
| onloadstart | Se ejecuta cuando el navegador comienza a descargar datos multimedia. Nuevo atributo en HTML5. |
| onpause | Se ejecuta cuando el archivo multimedia se pausa. Nuevo atributo en HTML5. |
| onplay | Se ejecuta cuando el archivo está listo para comenzar a reproducirse. Nuevo atributo en HTML5. |
| onplaying | Se ejecuta cuando el archivo comienza a reproducirse. Nuevo atributo en HTML5. |
| onprogress | Se ejecuta cuando el navegador está en proceso de obtener datos multimedia. Nuevo atributo en HTML5. |
| onratechange | Se 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. |
| onseeked | Se ejecuta cuando termina la búsqueda. Nuevo atributo en HTML5. |
| onseeking | Se 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. |
| onstalled | Se ejecuta cuando el navegador no puede obtener datos multimedia por cualquier motivo. Nuevo atributo en HTML5. |
| onsuspend | Se 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. |
| ontimeupdate | Se ejecuta cuando cambia la posición de reproducción. Nuevo atributo en HTML5. |
| onvolumechange | Se ejecuta cada vez que cambia el volumen (incluye establecer el volumen en "mute"). Nuevo atributo en HTML5. |
| onwaiting | Se 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
| Attribute | Description |
|---|---|
| onerror | Se ejecuta cuando ocurre un error al descargar un archivo externo. |
| onshow | Se ejecuta cuando el <menu> se muestra como un menú contextual. Nuevo atributo en HTML5. |
| ontoggle | Se ejecuta cuando un usuario abre o cierra el <details>. Nuevo atributo en HTML5. |
Practice
What are global event attributes in HTML?