Los eventos son una característica de los documentos HTML (también presentes en otros lenguajes de programación) que permite a los autores de páginas web agregar interactividad entre el sitio 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 el color de su texto cuando el visitante pase el puntero del ratón sobre él.

Así como los atributos, los eventos pueden ser definidos fácilmente en el tag de apertura del elemento, con el mismo formato


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 ratón 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>

Este es un texto que cambia de color. Pruébalo pasando el ratón

Lista de eventos

A continuación hay una lista de todos los eventos disponibles para los estándares HTML 4.01 y XHTML 1.0.

onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un conjunto de marcos. Este evento es exclusivo de los elementos HTML body y frameset.

onunload: el evento "onunload" se dispara cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y frameset.

onclick: el evento "onclick" ocurre cuando se realiza clic sobre el elemento.

ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble clic sobre el elemento.

onmousedown: el evento "onmousedown" es lanzado cuando es presionado el botón del ratón sobre el elemento (independientemente de que sea soltado o no).

onmouseup: el evento "onmouseup" se dispara cuando el botón del ratón se suelta sobre el elemento.

onmouseover: el evento "onmouseover" ocurre cuando el ratón es puesto sobre el elemento.

onmousemove: el evento "onmousemove" se ejecuta cuando el ratón es movido mientras está sobre el elemento.

onmouseout: el evento "onmouseout" es lanzado cuando el ratón se quita de encima de un documento.

onfocus: el envento "onfocus" se dispara cuando un elemento recibe el enfoque, bien sea a través del ratón o por navegación tabulada.

Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML , area, label, input, select, textarea, button.

onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del ratón o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

onkeypress: el evento "onkeypress" se ejecuta cuando es presionada una tecla 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 soltada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

onkeyup: el evento "onkeyup" se dispara cuando una tecla es soltada 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" se ejecuta 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 selecciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y textarea.

onchange: el evento "onchange" se dispara 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, select, textarea.

Nota que no todos los elementos soportan a todos los atributos en esta lista.

Ejemplos de muestra de uso de código

prueba 1

prueba 1b

prueba 2

prueba 3

prueba 4

prueba 5

prueba 6

prueba 7

prueba 8


Ampliar información en W3schools