¡Atrévete a destacar con los atributos de eventos HTML! En este artículo te mostramos todo lo que necesitas saber sobre cómo utilizarlos para mejorar la interactividad y funcionalidad de tus páginas web. No te pierdas esta oportunidad de aprender una de las herramientas más importantes dentro del mundo del desarrollo web. ¡Descubre en TIEngranaje cómo sobresalir con tus eventos HTML!
El W3C ha definido un conjunto de eventos centrales que están asociados con casi todos los elementos HTML y/o XHTML.
Atributos de eventos son una parte importante del aprendizaje de HTML, por lo que es una buena idea familiarizarse con ellos. La mayoría de estos eventos cubren la interacción simple del usuario, como el clic de un botón del mouse o la presión de una tecla.
Algunos elementos, como los controles de formulario, tienen algunos eventos especiales asociados con ellos. Otro evento útil es onload que se puede utilizar junto con el <body> para que se pueda ejecutar un script cuando se carga la página.
Aquí hay un ejemplo:
<startTag event="script">Element Content</endTag>Eventos de ratón y teclado
Eventos de ratón y teclado se puede usar cuando desea que se ejecute un script en particular cuando el mouse o el teclado interactúan con un elemento.
Los siguientes eventos se pueden utilizar en todos los elementos excepto <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>y <title>.
| Evento | Valor | Descripción |
|---|---|---|
onclick |
script |
Script para ejecutar con un clic del mouse |
ondblclick |
script |
Script para ejecutar con un doble clic del mouse |
onmousedown |
script |
Script para ejecutar cuando se presiona el botón del mouse |
onmousemove |
script |
Script para ejecutar cuando se mueve el puntero del mouse |
onmouseout |
script |
Script para ejecutar cuando el puntero del mouse se mueve fuera de un elemento |
onmouseover |
script |
Script para ejecutar cuando el puntero del mouse se mueve sobre un elemento |
onmouseup |
script |
Script para ejecutar cuando se suelta el botón del mouse |
| Evento | Valor | Descripción |
|---|---|---|
onkeydown |
script |
Script que se ejecutará cuando se presione una tecla |
onkeypress |
script |
Script que se ejecutará cuando se presione y se suelte una tecla |
onkeyup |
script |
Script que se ejecutará cuando se suelte una tecla |
Eventos de formulario
Los eventos de formulario también son muy comunes y útiles. Los siguientes eventos se pueden utilizar en <form> elementos:
| Evento | Valor | Descripción |
|---|---|---|
onblur |
script |
Script para ejecutar cuando un elemento pierde el foco |
onchange |
script |
Script para ejecutar cuando un elemento cambia |
onfocus |
script |
Script para ejecutar cuando un elemento obtiene el foco |
onreset |
script |
Script para ejecutar cuando se restablece un formulario |
onselect |
script |
Script para ejecutar cuando se selecciona un elemento |
onsubmit |
script |
Script para ejecutar cuando se envía un formulario |
Eventos de cuerpo y cuadro
Hay dos eventos que se pueden utilizar con el <body> y <frameset> elementos:
| Evento | Valor | Descripción |
|---|---|---|
onload |
script |
Script para ejecutar cuando se carga un documento |
onunload |
script |
Script para ejecutar cuando se descarga un documento |
Evento de imagen
Sólo hay un evento que se puede utilizar con el <img> elemento:
| Evento | Valor | Descripción |
|---|---|---|
onabort |
script |
Script para ejecutar cuando se interrumpe la carga de una imagen |
