Los eventos HTML son "cosas" que les suceden a los elementos HTML. Cuando se utiliza JavaScript en páginas HTML, JavaScript puede "reaccionar" ante estos eventos.
Eventos HTML
Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.
A continuación se muestran algunos ejemplos de eventos HTML:
Una página web HTML ha terminado de cargarse
Se cambió un campo de entrada HTML
Se hizo clic en un botón HTML
A menudo, cuando suceden eventos, es posible que desees hacer algo.
JavaScript le permite ejecutar código cuando se detectan eventos.
HTML permite agregar atributos de controlador de eventos, con código JavaScript, a elementos HTML.
Con comillas simples:
<element event='some JavaScript'>
Con comillas dobles:
<element event="some JavaScript">
En el siguiente ejemplo, se agrega un atributo onclick (con código) a un elemento <button>:
Ejemplo:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
En el ejemplo anterior, el código JavaScript cambia el contenido del elemento con id="demo".
En el siguiente ejemplo, el código cambia el contenido de su propio elemento (usando this.innerHTML):
Ejemplo:
<button onclick="this.innerHTML = Date()">The time is?</button>
El código JavaScript suele tener varias líneas. Es más común ver atributos de eventos llamando a funciones:
Ejemplo:
<button onclick="displayDate()">The time is?</button>
Eventos HTML comunes
Aquí hay una lista de algunos eventos HTML comunes:
| Evento | Descripción |
onchange | Cuando se ha cambiado un elemento HTML. |
onclick | El usuario hace clic en un elemento HTML. |
onmouseover | El usuario mueve el mouse sobre un elemento HTML. |
onmouseout | El usuario aleja el mouse de un elemento HTML. |
onkeydown | El usuario presiona una tecla del teclado. |
onload | El navegador ha terminado de cargar la página. |
La lista es mucho más larga: W3Schools JavaScript Reference HTML DOM Events
Controladores de eventos de JavaScript
Los controladores de eventos se pueden utilizar para controlar y verificar la entrada del usuario, las acciones del usuario y las acciones del navegador:
Cosas que se deben hacer cada vez que se carga una página.
Cosas que se deben hacer cuando la página está cerrada.
Acción que se debe realizar cuando un usuario hace clic en un botón.
Contenido que debe verificarse cuando un usuario ingresa datos.
Y mucho más.
Se pueden utilizar muchos métodos diferentes para permitir que JavaScript funcione con eventos:
Los atributos de eventos HTML pueden ejecutar código JavaScript directamente.
Los atributos de eventos HTML pueden llamar a funciones de JavaScript.
Puedes asignar sus propias funciones de controlador de eventos a elementos HTML.
Puedes evitar que se envíen o gestionen eventos.
Y mucho más.
Aprenderás mucho más sobre eventos y controladores de eventos en los capítulos de HTML DOM.
Traducido con 💚 desde W3Schools.com