24 - Eventos
Estructura inicial
En nuestra carpeta de proyecto crearemos la siguiente estructura:
/
├── js/
│ └── 24-eventos.js
└── index.htmlY un código sencillo para nuestro HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24 - Eventos</title>
</head>
<body>
<h1>Temario de JavaScript</h1>
<div id="app">
<button>Hazme clic</button>
<form>
<input type="text" placeholder="Nombre..." />
</form>
</div>
<script src="./js/24-eventos.js"></script>
</body>
</html>IMPORTANTE: El script debe cargarse al final de <body>
Tipos de eventos
La estructura es la siguiente:
elemento.addEventListener("tipoevento", () => {
//Código a ejecutar
})Vamos a ver algunos de los eventos que ofrece JS
click
Realiza una acción al hacer clic en un elemento:
/* Seleccionamos nuestros elementos */
const app = document.querySelector("#app")
const button = app.querySelector("button")
button.addEventListener("click", () => {
alert("¡Has pulsado el botón!")
})change
Realiza una acción cada vez que se modifica algún valor del elemento:
/* Seleccionamos nuestros elementos */
const app = document.querySelector("#app")
const input = app.querySelector("input")
/* Si el nombre tiene menos de tres caracteres, cambia el color de texto a rojo */
input.addEventListener("change", () => {
input.value.length < 3 ? input.style.color = "red" : input.style.color = "black"
})focus
Realiza una acción cada vez que se seleccione el elemento:
/* Seleccionamos nuestros elementos */
const app = document.querySelector("#app")
const input = app.querySelector("input")
input.addEventListener("focus", () => {
input.style.border = "green"
})Funciona de las misma forma que la pseudoclase :focus de CSS pero con todas las ventajas que ofrece JS
load
Realiza una acción cuando se carga un elemento:
window.addEventListener("load", () => {
console.log("Página cargada")
})mouseover y mouseleave
Realiza una acción cuando ponemos el cursor encima del elemento y cuando lo quitamos respectivamente:
const app = document.querySelector("#app")
const button = app.querySelector("button")
button.addEventListener("mouseover", () => {
button.style.backgroundColor = "blue"
})
button.addEventListener("mouseleave", () => {
button.style.backgroundColor = "red"
})Esto lo ideal sería hacerlo en CSS con :hover
scroll
Realiza una acción al hacer scroll en un elemento:
window.addEventLister("scroll", () => {
console.log(window.scrollY)
})submit
Realiza una acción cuando vamos a enviar un formulario:
const app = document.querySelector("#app")
const form = app.querySelector("form")
/* Evitamos que el formulario se envíe */
form.addEventListener("submit", (event) => {
event.preventDefault()
})resize
Realiza una acción cuando redimensionamos un elemento:
/* Cada vez que redimensionemos la ventana, nos mostrará en consola sus nuevas dimensiones */
window.addEventListener("resize", () => {
console.log(window.screen.width, window.screen.height)
})