Antes de empezar

Vamos a ver que hace addEventListener. Abre la consola del navegador para ver más cosas al interactuar. MAC: Cmd (⌘) + Option (⌥) + J || WINDOWS: Ctrl + Shift + J

Pulsa el botón que aparece debajo, RUN PROJECT

addEventListener es un método de JavaScript que nos permite “escuchar” un evento específico en un elemento del DOM y ejecutar una función (callback) cuando ese evento sucede.

Es la forma recomendada para manejar eventos sin mezclar la lógica en el HTML, y además permite asociar más de un evento al mismo elemento.

<!-- Este elemento está en el HTML -->
<button id="miBoton">Haz clic aquí</button>

const btn = document.getElementById("miBoton");
// Asignamos un evento "click" al botón
btn.addEventListener("click", () => {
  alert("¡Has hecho click en el botón!");
});

---

Pero… ¿Qué es un evento?

Un evento en JavaScript es una acción o suceso que ocurre en la página, ya sea por parte del usuario (clic, pulsación de teclas, etc.) o del propio navegador (carga finalizada, error, etc.). Cuando ocurre un evento, si hemos asociado una función a él, esa función se ejecuta automáticamente.

Principales tipos de eventos en JavaScript

1. Eventos del ratón

• click: cuando el usuario hace clic en un elemento.
• dblclick: cuando se hace doble clic.
• mouseover: cuando el ratón pasa por encima de un elemento.
• mouseout: cuando el ratón sale de un elemento.
• mousemove: cuando se mueve el ratón.

2. Eventos del teclado

• keydown: cuando se presiona una tecla.
• keyup: cuando se suelta una tecla.
• keypress: cuando se presiona una tecla que produce un carácter (en desuso).

3. Eventos de la página

• load: cuando la página o un recurso ha terminado de cargarse.
• DOMContentLoaded: cuando el HTML se ha parseado completamente.
• scroll: cuando el usuario se desplaza por la página.
• resize: cuando cambia el tamaño de la ventana.

4. Eventos de formularios

• submit: cuando se envía un formulario.
• input: cuando cambia el valor de un campo.
• focus: cuando un campo recibe el foco.
• blur: cuando el foco abandona un campo.

5. Eventos de arrastrar y soltar

• dragstart: al comenzar a arrastrar un elemento.
• dragover: al arrastrar sobre una zona válida.
• drop: al soltar el elemento arrastrado.

6. Eventos de audio y vídeo

• play: cuando se inicia la reproducción.
• pause: cuando se pausa.
• ended: cuando finaliza la reproducción.

Evento de ratón

<!-- HTML -->
<button id="btnHover">Pasa el ratón por aquí</button>

const btnHover = document.getElementById("btnHover");

// mouseover: se dispara al pasar el cursor por encima
btnHover.addEventListener("mouseover", () => {
  console.log("Has pasado el ratón por el botón.");
});

---

Evento de teclado

<!-- HTML -->
<input type="text" id="campoTexto" placeholder="Escribe algo..." />

const input = document.getElementById("campoTexto");

// keyup: se dispara cuando el usuario suelta una tecla
input.addEventListener("keyup", (evento) => {
  console.log("Has pulsado la tecla:", evento.key);
});

---

Evento de formulario

<!-- HTML -->
<form id="miFormulario">
  <input type="text" name="nombre" placeholder="Tu nombre" required />
  <button type="submit">Enviar</button>
</form>

const form = document.getElementById("miFormulario");

// submit: se dispara al enviar el formulario
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Evita la recarga de la página
  alert("Formulario enviado sin recargar la página");
});

---

Ahora mira todo el código

Pulsa el botón que aparece debajo, RUN PROJECT

---

Curiosidades y buenas prácticas

• Eliminar eventos: puedes usar removeEventListener para quitar un evento que ya no necesites.
• Fases de eventos (captura y burbuja): puedes especificar { capture: true } en addEventListener para escuchar el evento en la fase de captura en lugar de la fase de burbuja (por defecto).
• Delegación de eventos: en lugar de asignar eventos a cada hijo, se asigna al elemento padre y se usa event.target para saber quién disparó el evento. Muy útil para listas largas.
• Compatibilidad: en navegadores antiguos se usaba attachEvent, pero hoy en día addEventListener es el estándar universal.

Pulsa el botón que aparece debajo, RUN PROJECT

---

Conocer estos eventos y cómo manejarlos te permitirá dar interactividad a tus sitios o aplicaciones web de forma eficaz.

---