Eventos de JavaScript
Los eventos HTML son "cosas" que les suceden a los elementos HTML.
Cuando se usa JavaScript en páginas HTML, JavaScript puede "reaccionar" a estos eventos.
Eventos HTML
Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.
Estos son 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 los eventos, es posible que desee hacer algo.
JavaScript le permite ejecutar código cuando se detectan eventos.
HTML permite que los atributos del controlador de eventos, con código JavaScript , se agreguen a los elementos HTML.
Con comillas simples:
<element
event='some JavaScript'>
Con comillas dobles:
<element
event="some JavaScript">
En el siguiente ejemplo, onclickse agrega un atributo (con código) a un
<button>elemento:
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 comunes de HTML
Aquí hay una lista de algunos eventos HTML comunes:
| Evento | Descripción |
|---|---|
| en el cambio | Se ha cambiado un elemento HTML |
| al hacer clic | El usuario hace clic en un elemento HTML |
| el ratón por encima | El usuario mueve el mouse sobre un elemento HTML |
| fuera del ratón | El usuario aleja el mouse de un elemento HTML |
| onkeydown | El usuario presiona una tecla del teclado |
| cargar | 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 usar para manejar 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 más ...
Se pueden usar 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
- Puede asignar sus propias funciones de controlador de eventos a elementos HTML
- Puede evitar que los eventos se envíen o se manejen
- Y más ...
Aprenderá mucho más sobre eventos y controladores de eventos en los capítulos HTML DOM.