addEventListener en JavaScript para botones

Contenido del curso

Descubrir que ya puedes dirigir máquinas

El vocabulario para pensar computacionalmente

La anatomía de una página

Hacer que la página reaccione

El terreno donde vive tu código

Publicar en el mundo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:09

addEventListener en JavaScript para botones

Curso Gratis de Programación Básica

Clase 18 de 27

Clase 18 / 27

Recursos

Un botón que existe en la página pero no responde al clic no está roto: simplemente nadie le ha dicho qué hacer. Aquí entra addEventListener, la instrucción de JavaScript que conecta una acción del usuario con una función. Si estás aprendiendo a hacer que tus páginas reaccionen, este es el patrón que vas a ver toda tu vida.

¿Qué es un evento en JavaScript y por qué importa?

Un evento es cualquier cosa que ocurre en la página y que JavaScript puede escuchar para reaccionar.

Piensa en un clic, una tecla presionada, el mouse pasando sobre un elemento o un formulario enviado. JavaScript se queda esperando, como un guardia de seguridad con instrucciones claras: no hace nada hasta que alguien cruza la puerta, y entonces actúa.

¿Qué es un evento en JavaScript? Es una acción que ocurre en la página, como un clic o el envío de un formulario, y que tu código puede detectar para ejecutar una función específica.

En el caso de Okini, el botón de reservar tiene ID y estilos, pero sin un listener es solo decoración. La instrucción que cambia eso es addEventListener, que literalmente significa agregar un escuchador de eventos [02:02].

¿Cómo funciona addEventListener paso a paso?

El patrón siempre es el mismo y conviene grabarlo: selecciona el elemento, dile qué evento escuchar y dile qué hacer cuando ocurra.

Primero se usa querySelector para tomar el elemento del DOM, igual que en la clase anterior. Luego se encadena addEventListener con dos argumentos: el tipo de evento y la función que se ejecuta cuando ese evento sucede [02:24].

javascript botonReservar.addEventListener("click", function() { console.log("El usuario hizo clic"); });

¿Qué es una función callback?

La función que pasas como segundo argumento no tiene nombre ni parámetros y existe únicamente para ejecutarse cuando ocurra el evento. A ese tipo de función se le llama callback, pero lo importante no es el nombre, sino el patrón.

¿Por qué se escribe "click" con CK?

Porque el nombre del evento está en inglés y así lo espera JavaScript. El texto dentro del console.log, en cambio, es un string libre y puedes escribirlo en español, como clic, sin la K [03:18].

¿Cómo descontar tazas y deshabilitar el botón cuando se agotan?

La idea pasa de imprimir en consola a modelar una regla de negocio: restar una taza por cada clic y deshabilitar el botón al llegar a cero.

Para eso, la función puedeReservar cambia de propósito. Antes recibía una cantidad y validaba que no superara dos tazas, una regla del módulo 2 sobre lo que pedía el usuario. Ahora recibe tazasDisponibles y verifica que quede al menos una, modelando el agotamiento del stock de 50 tazas al día [04:09].

No es que la versión anterior estuviera mal: resolvía un problema distinto. En una aplicación real, ambas reglas podrían convivir.

¿Por qué usar Number() al leer textContent?

Porque textContent siempre devuelve un string, incluso cuando ves un número en pantalla.

Si el contador muestra 50 y haces "50" - 1, JavaScript no devuelve 49 sino que se confunde con la concatenación de strings. La función Number() convierte ese texto a número antes de operar [05:48].

¿Por qué "50" - 1 da resultados raros en JavaScript? Porque cuando un valor es string, los operadores se comportan distinto. Convertirlo con Number() antes de restar evita un bug clásico disfrazado de nada.

El flujo final usa una estructura condicional if/else: mientras haya tazas, descuenta una; cuando llega a cero, el botón cambia su texto a Sin cupos y se deshabilita.

¿Cómo se conectan HTML, CSS y JavaScript en una sola interacción?

Por primera vez en el curso, los tres mundos trabajan juntos en respuesta a una acción del usuario.

HTML aporta la estructura: el botón y el contador.
CSS define los estilos visuales que ya teníamos.
JavaScript suma la lógica: las funciones del módulo 2, la manipulación del DOM con querySelector y ahora el evento que dispara todo.

Eso es lo que convierte una página estática en una aplicación. Y cuando uses inteligencia artificial para generar código interactivo, vas a reconocer este patrón de inmediato: querySelector para encontrar el elemento, addEventListener para escuchar y una función callback para actuar. Saber leerlo te permite evaluar si la IA conectó los eventos correctamente o si está escuchando el elemento equivocado.

Tu turno: practica con un eventListener propio

Agrega un addEventListener al botón de reservar con esta lógica:

Cuando se haga clic y todavía haya tazas disponibles, imprime en consola Reserva registrada.
Cuando el contador llegue a cero, imprime No hay cupos disponibles.
No toques el HTML ni el CSS, solo el JavaScript.

Y si lo terminas rápido, cambia click por dblclick y prueba qué pasa. ¿Qué cambió en el comportamiento del botón? Cuéntamelo en los comentarios.