Los eventos son una característica de los documentos HTML (presente en otros lenguajes de programación también) que permite a los autores agregar interactividad entre el sitio web y el visitante, al ejecutar programas del lado cliente cuando el visitante (u otro programa) realiza una acción. Por ejemplo, el autor puede hacer que un párrafo cambie de color de su texto cuando el visitante pose el puntero del mouse sobre el mismo.
Así como los atributos, los eventos pueden ser definidos fácilmente en el tag de apertura del elemento, con el mismo formato:
<nombretag evento="codigo">
El contenido del evento es el código que se ejecutará, y debe ser creado utilizando un lenguaje del lado cliente (por ejemplo, JavaScript) que debe ser soportado por el navegador para que funcione. en el ejemplo siguiente, definimos un párrafo que cambia el color de su texto a rojo cuando el mouse pasa por encima, y lo devuelve a negro cuando se retira.
| <p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Este es un texto que cambia de color. Pruébalo!</p> |
| Vemos |
Lista de eventos
A continuación hay una lista de todos los eventos disponibles para los estándares HTML 4.01 y XHTML1.0.
- onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body yHTML framset.
- onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset.
- onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.
- ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.
- onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado sobre el elemento (independientemente de que sea soltado o no).
- onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el elemento.
- onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento.
- onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está sobre el elemento.
- onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un documento.
- onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y HTML button.
- onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
- onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
- onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada (independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
- onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
- onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del elemento HTML form.
- onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por defecto. Este evento es exclusivo del elemento HTML form.
- onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y HTML textarea.
- onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos HTML input, HTML select y HTML textarea.
Atributos globales de eventos
Atributos globales de eventos
HTML 4 añadido la posibilidad de dejar que los acontecimientos activar acciones en un navegador, como empezar a JavaScript cuando un usuario hace clic en un elemento.
A continuación se presentan los atributos de eventos globales que se pueden añadir a los elementos HTML para definir acciones de sucesos.
Nuevo:Los nuevos atributos de eventos en HTML5.
Los atributos de ventana de eventos
Eventos activados por el objeto de ventana (se aplica a la etiqueta <body>):
| Atributo | Valor | Descripción |
|---|---|---|
| onafterprintNuevo | guión | Script para ser ejecutado después de que el documento se imprime |
| onbeforeprintNuevo | guión | Script para ser ejecutado antes de que el documento se imprime |
| Nuevaonbeforeunload | guión | Script para ser ejecutado antes de que el documento se descarga |
| Nuevaonerror | guión | Script para ser ejecutado cuando se produzca un error |
| Nuevaonhaschange | guión | Script para ser ejecutado cuando el documento ha cambiado |
| onload | guión | Los incendios después de la página termine de cargarse |
| Nuevaonmessage | guión | Script para ser ejecutado cuando el mensaje se activa |
| Nuevaonoffline | guión | Script para ser ejecutado cuando el documento se queda sin conexión |
| Nuevaononline | guión | Script para ser ejecutado cuando el documento se pone en línea |
| Nuevaonpagehide | guión | Script que se ejecuta cuando la ventana está oculta |
| Nuevaonpageshow | guión | Script que se ejecuta cuando la ventana se hace visible |
| Nuevaonpopstate | guión | Script para ser ejecutado cuando la ventana cambia de historia |
| Nuevaonredo | guión | Script para ser ejecutado cuando el documento realiza una puesta al día |
| OnResizeNuevo | guión | Se activa cuando la ventana del navegador cambia de tamaño |
| Nuevaonstorage | guión | Script para ser ejecutado cuando un área de almacenamiento Web se actualiza |
| Nuevaonundo | guión | Script para ser ejecutado cuando el documento realiza un deshacer |
| onunload | guión | Se dispara una vez que una página se carga (o la ventana del navegador se ha cerrado) |
Eventos de formulario
Eventos activados por acciones dentro de un formulario HTML (se aplica a casi todos los elementos HTML, pero es la más utilizada en los elementos de formulario):
| Atributo | Valor | Descripción |
|---|---|---|
| onblur | guión | Dispara el momento en que el elemento pierde el foco |
| onchange | guión | Fuegos el momento en que el valor del elemento se cambia |
| NuevaOnContextMenu | guión | Script para ser ejecutado cuando un menú contextual se activa |
| onfocus | guión | Fuegos el momento en que el elemento obtiene el foco |
| Nuevaonformchange | guión | Script para ser ejecutado cuando se cambia de forma |
| Nuevaonforminput | guión | Script para ser ejecutado cuando un formulario de entrada de usuario se |
| Nuevaoninput | guión | Script para ser ejecutado cuando un elemento recibe la entrada del usuario |
| Nuevaoninvalid | guión | Script para ser ejecutado cuando un elemento no es válido |
| onreset | guión | Se activa cuando el botón de reinicio en una forma que se hace clic No es compatible con HTML5 |
| onselect | guión | Los incendios después de algún texto ha sido seleccionado en un elemento |
| onSubmit | guión | Se activa cuando se envía un formulario |
Eventos de teclado
| Atributo | Valor | Descripción |
|---|---|---|
| onkeydown | guión | Se activa cuando un usuario está presionando una tecla |
| onkeypress | guión | Se activa cuando un usuario pulsa una tecla |
| onkeyup | guión | Se activa cuando el usuario suelta una tecla |
Eventos del mouse
Eventos activados por un ratón, o acciones similares de usuario:
| Atributo | Valor | Descripción |
|---|---|---|
| onclick | guión | Los incendios en un clic de ratón sobre el elemento |
| ondblclick | guión | Los incendios de un ratón doble clic en el elemento |
| Nuevaondrag | guión | Script para ser ejecutado cuando un elemento se arrastra |
| Nuevaondragend | guión | Script que se ejecuta al final de una operación de arrastre |
| Nuevaondragenter | guión | Script para ser ejecutado cuando un elemento ha sido arrastrado a un destino válido |
| NuevaOnDragLeave | guión | Script para ser ejecutado cuando un elemento deja un destino válido |
| Nuevaondragover | guión | Script para ser ejecutado cuando un elemento está siendo arrastrado sobre un destino válido |
| Nuevaondragstart | guión | Script para ser ejecutado en el inicio de una operación de arrastre |
| Nuevaondrop | guión | Script para ser ejecutado cuando el elemento arrastrado se redujo |
| onmousedown | guión | Se activa cuando el botón del ratón se presiona hacia abajo sobre un elemento |
| onmousemove | guión | Se activa cuando el puntero del ratón se mueve sobre un elemento |
| onmouseout | guión | Se activa cuando el puntero del ratón se mueve fuera de un elemento |
| onmouseover | guión | Se activa cuando el puntero del ratón se mueve sobre un elemento |
| onmouseup | guión | Se activa cuando el botón del ratón se suelta sobre un elemento |
| NuevaOnMouseWheel | guión | Script para ser ejecutado cuando la rueda del ratón se está rotando |
| NuevaOnScroll | guión | Script para ser ejecutado cuando un elemento de la barra de desplazamiento se está desplazando |
Medios Eventos
Eventos activados por medios como videos, imágenes y audio (se aplica a todos los elementos HTML, pero es más común en los elementos de los medios de comunicación, como <audio>, <embed>, <img>, <object> y <video>):
| Atributo | Valor | Descripción |
|---|---|---|
| OnAbort | guión | Script para ser ejecutado en abortar |
| Nuevaoncanplay | guión | Script para ser ejecutado cuando un archivo está listo para empezar a jugar (si ha tamponada suficiente para empezar) |
| Nuevaoncanplaythrough | guión | Script para ser ejecutado cuando un archivo se puede reproducir todo el camino hasta el final sin pausas para el almacenamiento temporal |
| Nuevaondurationchange | guión | Script para ser ejecutado cuando la longitud de los cambios en los medios |
| Nuevaonemptied | guión | Script para ser ejecutado cuando algo malo sucede y el archivo es de repente no está disponible (como se desconecta inesperadamente) |
| Nuevaonended | guión | Script para ser ejecutado cuando el medio tiene llegar al final (un evento útil para mensajes como "gracias por escucharme") |
| Nuevaonerror | guión | Script que se ejecuta cuando se produce un error cuando el archivo está siendo cargado |
| Nuevaonloadeddata | guión | Script que se ejecuta cuando se carga la información de medios |
| Nuevaonloadedmetadata | guión | Script para ser ejecutado cuando los metadatos (como dimensiones y duración) se cargan |
| NuevaonLoadStart | guión | Script que se ejecute al igual que el archivo empieza a cargarse antes de que algo está realmente cargado |
| NuevaOnPause | guión | Script para ser ejecutado cuando los medios de comunicación está en pausa, ya sea por el usuario o mediante programación |
| Nuevaonplay | guión | Script para ser ejecutado cuando los medios de comunicación está listo para empezar a jugar |
| Nuevaonplaying | guión | Script para ser ejecutado cuando los medios de comunicación en realidad ha comenzado a jugar |
| NuevaOnProgress | guión | Script para ser ejecutado cuando el navegador está en el proceso de obtención de los datos de medios |
| Nuevaonratechange | guión | Grafía que se ejecute cada vez que cambia la velocidad de reproducción (como cuando un usuario cambia a una velocidad lenta o modo de avance rápido) |
| Nuevaonreadystatechange | guión | Grafía que se ejecute cada vez que cambia el estado preparado (estado preparado un seguimiento del estado de los datos de los medios de comunicación) |
| Nuevaonseeked | guión | Script para ser ejecutado cuando el atributo de búsqueda se establece en false indica que la búsqueda ha terminado |
| Nuevaonseeking | guión | Script para ser ejecutado cuando el atributo de búsqueda se establece en true indica que la búsqueda está activo |
| Nuevaonstalled | guión | Script para ser ejecutado cuando el navegador no es capaz de recuperar los datos de los medios por cualquier motivo |
| Nuevaonsuspend | guión | Script para ser ejecutado cuando ir a buscar los datos de medios se detiene antes de que esté completamente cargado por cualquier razón |
| Nuevaontimeupdate | guión | Script para ser ejecutado cuando la posición de juego ha cambiado (como cuando el usuario avanza rápidamente hacia un punto diferente en los medios de comunicación) |
| Nuevaonvolumechange | guión | Grafía que se ejecute cada vez que se cambia el volumen que (incluye ajuste el volumen a "mute") |
| Nuevaonwaiting | guión | Script para ser ejecutado cuando los medios de comunicación se ha detenido, pero se espera que reanude (como cuando los medios de comunicación hace una pausa para amortiguar más datos) |
