El timbre de la puerta
Un timbre no hace nada hasta que alguien lo pulsa. Entonces suena.
Una página funciona igual. Hasta ahora tu script se ejecutaba al cargar, una sola vez. Con eventos, la página espera y reacciona cuando el usuario hace algo.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Evento | Algo que pasa en la página: un clic, una tecla, un texto escrito. | click |
| addEventListener | Dice a un elemento: cuando pase este evento, ejecuta esta función. | button.addEventListener('click', ...) |
| Función de respuesta | La función que se ejecuta cuando salta el evento. | function () { ... } |
| event | Un objeto que da datos del evento, como la tecla pulsada. | event.key |
| value | El texto que hay escrito ahora en un campo. | field.value |
| setInterval | Repite una función cada cierto tiempo, en milisegundos. | setInterval(f, 1000) |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Antes de empezar: una función es un valor
Para los eventos necesitas una idea nueva. Una función se puede guardar y entregar a otra, como cualquier dato.
Mira la diferencia entre sayHello y sayHello(). Con paréntesis la llamas ahora. Sin paréntesis solo la entregas.
Pruébalo: pasar una función
// Una función se puede guardar y pasar como cualquier valor.
function sayHello() {
console.log('¡Hola desde la función!');
}
function doThreeTimes(action) {
action();
action();
action();
}
// Le pasamos la función sin paréntesis: todavía no la llamamos.
doThreeTimes(sayHello);
Reaccionar a un clic
Buscas el botón, y le dices dos cosas: qué evento esperas y qué función ejecutar.
button.addEventListener('click', function () { ... });
Dentro de la función va lo que quieres que pase cada vez que alguien pulse.
Pruébalo: un contador
<h1>Bocadillos vendidos</h1>
<p id="count"></p>
<button id="add">Uno más</button>
Ejemplo resuelto: eventos que vas a usar
| Evento | Cuándo salta | Se pone en |
|---|---|---|
| click | Al hacer clic o tocar | Un botón o cualquier elemento |
| input | Con cada cambio del texto | Un campo de texto |
| keydown | Al pulsar una tecla | document |
| submit | Al enviar un formulario | El formulario |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: eventos
Inténtalo
Repaso rápido: eventos
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Reaccionar a lo que escribes
Un campo de texto lanza el evento input con cada letra. Dentro de la función lees field.value, que es el texto de ahora mismo.
Así puedes enseñar un saludo mientras la persona escribe.