Eventos

1 // Escuchar un evento

Para reaccionar a un evento necesitas tres cosas: el elemento, el tipo de evento y la función que se ejecutará. Se unen con addEventListener:

const boton = document.querySelector('#guardar');

function manejarClic() {
  console.log('Has pulsado guardar');
}

boton.addEventListener('click', manejarClic);

Aquí aparecen juntas dos ideas del módulo anterior. La función se pasa sin paréntesis, porque no quieres ejecutarla ahora sino entregarla. Y como es un callback, puede usar las variables del lugar donde se escribió gracias a los closures.

Un mismo elemento puede tener varios listeners para el mismo evento, y se ejecutarán en el orden en que se registraron.

2 // El objeto evento

Cuando el navegador llama a tu función, le pasa como argumento un objeto evento con la información de lo que ha ocurrido. Por convención se llama e, ev o event:

boton.addEventListener('click', (e) => {
  console.log(e.type);      // 'click'
  console.log(e.target);    // el elemento sobre el que se hizo clic
});

document.addEventListener('keydown', (e) => {
  console.log(e.key);       // 'Enter', 'a', 'Escape'...
  if (e.key === 'Escape') cerrarModal();
});

campo.addEventListener('input', (e) => {
  console.log(e.target.value); // el texto actual del campo
});

Además de las propiedades comunes, cada tipo de evento añade las suyas: los de ratón traen la posición (clientX, clientY), los de teclado la tecla (key) y los modificadores (ctrlKey, shiftKey).

3 // Los eventos que más vas a usar

4 // Comportamiento por defecto y limpieza

Muchos elementos ya hacen algo por sí mismos: un enlace navega, un formulario se envía y recarga la página, un clic derecho abre el menú contextual. El método preventDefault() cancela esa acción del navegador, pero no detiene tu código:

formulario.addEventListener('submit', (e) => {
  e.preventDefault();       // el formulario no recarga la página
  // aquí validas y envías los datos con JavaScript
});

Para dejar de escuchar un evento se usa removeEventListener con exactamente la misma función que se registró. Por eso, si piensas quitar un listener, no puedes usar una flecha anónima al registrarlo. Si sólo necesitas que se ejecute una vez, hay una opción más cómoda:

boton.addEventListener('click', mostrarBienvenida, { once: true });

<input id="buscar" type="search">
<p id="contador">0 / 30</p>

const buscar = document.querySelector('#buscar');
const contador = document.querySelector('#contador');

buscar.addEventListener('input', (e) => {
  const longitud = e.target.value.length;
  contador.textContent = `${longitud} / 30`;
  contador.classList.toggle('excedido', longitud > 30);
});

5 // Para practicar

Botones que muestran y ocultan contenido, un contador en vivo y un atajo de teclado. Cada ejercicio trae el enunciado en los comentarios del código.