Los atributos de eventos son mecanismos que crean una interacción entre los elementos del documento HTML y ciertos sucesos que pueden estar relacionados con el sistema o con las acciones del usuario.
Estos eventos están asociados a fragmentos de código JavaScript, por lo que se ejecutan en el lado del cliente. Se utilizan para que el código ejecute funciones que se iniciarán según las condiciones propias del evento; por ejemplo, cuando el usuario haga clic sobre un elemento determinado.
Existen algunos atributos de eventos que están disponibles para todos los elementos que existen, mientras que hay otros que sólo tendrán efecto en elementos específicos. Este sería el caso de eventos relacionados con la reproducción de contenido multimedia como audio y vídeo.
Atributos de eventos de ventana
Estos atributos de eventos sólo se aplican al elemento <body>
.
Atributo | Descripción |
---|---|
onafterprint | Se ejecuta cuando el documento es imprimido. |
onbeforeprint | Se ejecuta antes de que el documento sea imprimido. |
onbeforeunload | Se ejecuta antes de abandonar la página, justo antes de que se ejecute onunload . |
onblur | Se ejecuta cuando la ventana pierde el foco. |
onerror | Se ejecuta cuando ocurre un error durante la descarga de un documento. |
onhashchange | Se ejecuta cuando cambia el texto ancla de una URL (lo que viene después de # ). |
onload | Se ejecuta cuando se ha cargado completamente el contenido de una página web. |
onmessage | Se ejecuta cuando se activa un mensaje. |
onoffline | Se ejecuta cuando el navegador web trabaja sin conexión a Internet. |
ononline | Se ejecuta cuando el navegador web trabaja con conexión a Internet. |
onpagehide | Se ejecuta cuando el usuario sale de la página web. |
onpageshow | Se ejecuta cuando el usuario navega hacia la página web. |
onpopstate | Se ejecuta cuando el historial de la ventana cambia. |
onredo | Se ejecuta cuando se usa la opción Rehacer (Redo). |
onresize | Se ejecuta cuando la ventana cambia de tamaño. |
onstorage | Se ejecuta cuando se actualiza el almacenamiento web. |
onundo | Se ejecuta cuando se usa la opción Deshacer (Undo). |
onunload | Se ejecuta cuando el usuario ha abandonado la página web. |
Atributos de eventos de formulario
Algunos eventos pueden ocurrir en un formulario y por tanto son conocidos como eventos de formulario. Estos eventos ocurren cuando un usuario abre o cierra un formulario, cuando se mueve entre formularios, etc.
Los atributos de eventos de formulario pueden ser aplicados a todos los elementos HTML, pero se usan generalmente a los elementos de formulario.
Atributo | Descripción |
---|---|
onblur | Se ejecuta cuando el elemento de formulario pierde el foco. |
onchange | Se ejecuta cuando el valor de un elemento ha cambiado. |
oncontextmenu | Se ejecuta cuando el menú contextual se muestra. |
onfocus | Se ejecuta cuando un elemento obtiene el foco. |
oninput | Se ejecuta cuando un elemento obtiene la entrada de datos. |
oninvalid | Se ejecuta cuando un elemento de entrada tiene un valor inválido. |
onreset | Se ejecuta cuando se reinicia un formulario. |
onsearch | Se ejecuta cuando el usuario escribe algo en un campo de búsqueda (<input type='search'> ). |
onselect | Se ejecuta cuando se selecciona texto en un elemento. |
onsubmit | Se ejecuta cuando se envía el formulario. |
Atributos de eventos de teclado
Los atributos de eventos de teclado tienen relación con el uso del teclado y pueden ser aplicados a todos los elementos HTML.
Atributo | Descripción |
---|---|
onkeydown | Se ejecuta cuando el usuario está pulsando una tecla del teclado. |
onkeypress | Se ejecuta cuando el usuario ha pulsado una tecla del teclado (no funciona para las teclas Alt, Ctrl, Shift, Esc y PrScr). |
onkeyup | Se ejecuta cuando el usuario ha dejado de pulsar una tecla. |
Atributos de eventos de ratón
Los atributos de eventos de ratón ocurren cuando el ratón interactúa con el documento y pueden ser aplicados a todos los elementos HTML.
Atributo | Descripción |
---|---|
onclick | Se ejecuta cuando se hace clic sobre el elemento con un botón del ratón. |
ondblclick | Se ejecuta cuando se hace doble clic sobre el elemento con un botón del ratón. |
ondrag | Se ejecuta cuando un elemento está siendo arrastrado. |
ondragend | Se ejecuta cuando el usuario ha terminado de arrastrar un elemento. |
ondragenter | Se ejecuta cuando un elemento arrastrado se mueve dentro de un destino de colocación válido. |
ondragleave | Se ejecuta cuando un elemento arrastrado se mueve fuera de un destino de colocación válido. |
ondragover | Se ejecuta cuando un elemento está siendo arrastrado sobre un destino de colocación válido. |
ondragstart | Se ejecuta cuando el usuario empieza a arrastrar un elemento. |
ondrop | Se ejecuta cuando el usuario suelta el elemento que estaba arrastrando. |
onmousedown | Se ejecuta cuando el botón del ratón está pulsado. |
onmousemove | Se ejecuta cuando el puntero del ratón se mueve sobre el elemento. |
onmouseout | Se ejecuta cuando el puntero del ratón se mueve fuera de un elemento. |
onmouseover | Se ejecuta cuando el puntero del ratón se mueve sobre un elemento. |
onmouseup | Se ejecuta cuando el botón del ratón deja de estar pulsado. |
onscroll | Se ejecuta cuando se mueve la barra de desplazamiento de un elemento. |
onwheel | Se ejecuta cuando el usuario hace girar la rueda del ratón. |
Atributos de eventos del portapapeles
Los atributos de eventos del portapapeles tienen que ver con el uso que hace el usuario del portapepeles del sistema operativo.
Atributo | Descripción |
---|---|
oncopy | Se ejecuta cuando el contenido de un elemento ha sido copiado. |
oncut | Se ejecuta cuando el contenido de un elemento ha sido cortado. |
onpaste | Se ejecuta cuando el contenido de un elemento ha sido pegado. |
Atributos de eventos para archivos multimedia
Los atributos de eventos para archivos multimedia se pueden usar en cualquier elemento HTML, pero en general se usan en elementos de contenido multimedia, como <video>
, <audio>
, <img>
, <embed>
y <object>
.
Atributo | Descripción |
---|---|
onabort | Se ejecuta cuando se detiene la carga de audio o vídeo. |
oncanplay | Se ejecuta cuando el archivo está preparado para empezar la reproducción. |
oncanplaythrough | Se ejecuta cuando el archivo está preparado para reproducirse de principio a fin sin interrupciones. |
oncuechange | Se ejecuta cuando cambia la duración del contenido multimedia. |
onemptied | Se ejecuta cuando ocurre algo y el archivo pasa a no estar disponible (normalmente un corte de conexión de Internet). |
onended | Se ejecuta cuando un archivo multimedia ha alcanzado el final. |
onerror | Se ejecuta cuando ocurre un error mientras el archivo está siendo reproducido. |
onloadeddata | Se ejecuta cuando los datos del contenido multimedia se han cargado. |
onloadedmetadata | Se ejecuta cuando los metadatos del contenido multimedia se han cargado. |
onloadstart | Se ejecuta cuando el navegador web empieza la descarga de los datos del archivo. |
onpause | Se ejecuta cuando la reproducción del contenido multimedia ha sido pausada. |
onplay | Se ejecuta cuando el archivo ha iniciado la reproducción. |
onplaying | Se ejecuta cuando el archivo está preparado para iniciar la reproducción. |
onprogress | Se ejecuta cuando el navegador web está en proceso de obtener los datos del contenido multimedia. |
onratechange | Se ejecuta cada vez que cambia el modo de reproducción (avance rápido, reproducción lenta, etc). |
onseeked | Se ejecuta cuando el usuario ha terminado de saltar a una nueva posición en el contenido multimedia. |
onseeking | Se ejecuta cuando el usuario empieza a saltar a una nueva posición en el contenido multimedia. |
onstalled | Se ejecuta cuando el navegador web no puede obtener los datos del contenido multimedia por alguna razón. |
onsuspend | Se ejecuta cuando el navegador web ya ha empezado a extraer datos del contenido multimedia, pero el proceso fue suspendido antes de que todos los datos fueran completamente cargados. |
ontimeupdate | Se ejecuta cuando la posición de reproducción ha cambiado. |
onvolumechange | Se ejecuta cada vez que se cambia el volumen del fichero de audio o vídeo. |
onwaiting | Se ejecuta cuando el fichero multimedia se detiene temporalmente debido a que necesita cargar el siguiente fotograma. |