CodeAventura
JavaScript en el DOM
▸Contenido y eventos▸Escuchar eventos básicos

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eventos básicos</title>
  </head>
  <body>
    <input id="buscador" type="text" placeholder="Escribe para filtrar" />
    <button id="btn-buscar">Buscar</button>
    <p id="salida">Sin acciones todavía</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
09 / 16Escuchar eventos básicos
Anterior

Escuchar eventos básicos

DOM sin eventos = interfaz muda

Manipular el DOM está bien, pero una app real necesita reaccionar al usuario. Ahí entra addEventListener: el método que conecta un elemento con una acción.

Estructura base

Tres partes:

  1. elemento — el nodo que "escucha"
  2. tipo de evento — qué espera ("click", "input", "submit"...)
  3. callback — qué ejecuta cuando ocurre

Dos eventos esenciales

click

Se dispara cuando el usuario hace clic sobre un elemento. Es el evento más común para botones y acciones explícitas:

input

Se dispara cada vez que cambia el valor de un campo de texto. Ideal para búsqueda en vivo o validación instantánea:

A diferencia de change (que solo se dispara al salir del campo), input responde en tiempo real.

Leer el valor del campo

Dentro del callback puedes acceder al texto que el usuario escribió con .value:

Patrón de interacción

  1. Capturas evento
  2. Lees contexto (valor, elemento, estado)
  3. Actualizas DOM

Cuando repites este ciclo, empiezas a pensar como desarrollador frontend.

Tu desafío 🚀

  1. Escucha el click del botón #btn-buscar
  2. Escucha el input del campo #buscador
  3. Actualiza el texto de #salida con lo que el usuario escribe

Una interfaz interactiva nace cuando el código empieza a escuchar.