3.5 Eventos¶
Un evento es algo que ocurre en la página: un clic, pasar el ratón, escribir, enviar un formulario. Con addEventListener le dices a JavaScript qué función ejecutar cuando ocurra.
Eventos habituales¶
| Evento | Cuándo se produce |
|---|---|
click |
Un clic |
dblclick |
Doble clic |
mouseover / mouseout |
El ratón entra / sale del elemento |
input |
Cada cambio mientras se escribe en un campo |
change |
El valor cambió (al salir del campo, en select, checkbox…) |
submit |
Se envía un formulario |
keydown |
Se pulsa una tecla |
DOMContentLoaded |
El HTML ya está cargado |
Un mismo elemento puede tener varios addEventListener, incluso de eventos distintos, sin que interfieran.
El objeto event¶
La función recibe un objeto con datos del evento:
e.targetes el elemento que provocó el evento.e.preventDefault()evita el comportamiento normal (seguir un enlace, enviar un formulario).
mouseover y :hover
Un efecto solo visual al pasar el ratón se hace mejor con CSS (:hover). Usa el evento mouseover cuando necesites lógica.