Aprender a manipular eventos en JavaScript es lo que convierte una página estática en una experiencia interactiva. Con addEventListener puedes responder a clics, movimientos del mouse y otros disparadores que cambian estilos o ejecutan funciones en tiempo real, todo conectado directamente a tu HTML.

La idea es simple: seleccionas un elemento, le dices qué evento escuchar y defines qué pasa cuando ese evento se dispara. Y aquí viene lo interesante, también puedes quitar esos eventos cuando ya no los necesitas.

¿Cómo selecciono elementos del HTML desde JavaScript?

Antes de agregar cualquier evento, necesitas tener una referencia al elemento en tu archivo JS. Para eso usas document.querySelector, que te permite traer cualquier nodo del DOM usando selectores de CSS [01:30].

En el ejemplo trabajamos con dos elementos: un div con la clase container y un button. Como solo hay un botón en el proyecto, no hace falta ser específico con un ID.

javascript const container = document.querySelector('.container'); const button = document.querySelector('button');

Con esas dos constantes ya tienes el control de los elementos y puedes empezar a engancharles comportamientos.

¿Qué hace document.querySelector? Devuelve el primer elemento del DOM que coincide con el selector CSS que le pases. Si quieres una clase, usas .nombre; si es un ID, usas #nombre.

¿Cómo funciona addEventListener y qué parámetros recibe?

addEventListener es un método que se comporta como una función y recibe dos parámetros clave: el tipo de evento que quieres escuchar y el callback con el código que se ejecuta cuando ese evento ocurre [02:30].

Para cambiar el color del contenedor cuando el mouse pasa por encima usamos el evento mouseover, y para regresarlo a su estado original cuando el mouse sale, usamos mouseout [03:15].

javascript container.addEventListener('mouseover', () => { container.style.backgroundColor = 'blue'; });

container.addEventListener('mouseout', () => { container.style.backgroundColor = 'red'; });

El resultado: el div arranca rojo, se vuelve azul al pasar el mouse y vuelve a rojo al salir. Ese ida y vuelta es lo que le da dinamismo visual a tu página sin recargar nada.

¿Qué eventos del mouse puedo usar?

Entre los más comunes para interacción visual están:

• mouseover: se dispara cuando el cursor entra al elemento.
• mouseout: se dispara cuando el cursor sale del elemento.
• click: se dispara al hacer clic con el botón principal.

Cada uno se conecta exactamente igual con addEventListener, solo cambia el primer parámetro.

¿Cómo capturo el evento click de un botón?

Para el botón usamos el evento click y disparamos un alert como respuesta visible al usuario [05:00]. La estructura es la misma que con los eventos de mouse, lo único que cambia es el tipo de evento.

javascript button.addEventListener('click', () => { alert('Button clicked'); });

Al guardar y hacer clic, aparece la alerta. Cierras el aviso y queda listo para volver a dispararse.

¿Cuál es la diferencia entre mouseover y click? mouseover se activa solo con que el cursor pase encima del elemento, sin necesidad de presionar nada. click requiere que el usuario presione y suelte el botón del mouse sobre el elemento.

¿Cómo elimino un evento con removeEventListener?

Aquí está el detalle importante: para poder remover un evento más adelante, el callback debe estar guardado en una función con nombre, no como una arrow function anónima dentro del addEventListener [06:30].

Si pasas la función directamente como expresión, JavaScript no tendrá una referencia para identificarla y borrarla después. Por eso primero creamos la función aparte:

javascript const buttonClickCallback = () => { alert('Button clicked'); };

button.addEventListener('click', buttonClickCallback);

Ahora sí puedes retirarla. Para mostrarlo en acción usamos setTimeout, una web API del navegador que ejecuta un código después de un tiempo definido en milisegundos [07:45].

javascript setTimeout(() => { button.removeEventListener('click', buttonClickCallback); }, 2000);

La lógica es clara: después de 2000 milisegundos (2 segundos), el botón pierde su escucha del evento click. Si haces clic dentro de ese intervalo, la alerta funciona; si esperas más, el botón deja de responder.

¿Por qué necesito guardar el callback en una constante?

Porque removeEventListener necesita la misma referencia que usaste al agregar el evento. Si pasaras dos arrow functions idénticas pero en lugares distintos, JavaScript las trataría como funciones diferentes y no podría eliminar la primera.

Esta misma lógica aplica para los eventos del mouse del container: si quisieras retirarlos, tendrías que guardar los callbacks de mouseover y mouseout en constantes separadas y luego llamarlos desde removeEventListener.

¿Cuándo conviene usar setTimeout junto a removeEventListener?

setTimeout recibe dos parámetros: un callback con la acción a ejecutar y el tiempo de espera en milisegundos. Combinarlo con removeEventListener es útil para escenarios como:

• Botones que solo deben funcionar durante una ventana limitada de tiempo.
• Promociones o cuentas regresivas que desactivan interacciones al terminar.
• Tutoriales interactivos donde un paso se cierra solo tras unos segundos.

Dominar este flujo (seleccionar, escuchar, ejecutar y remover) es la base para construir interfaces que respondan al usuario sin acumular listeners innecesarios que terminen pesando en el rendimiento.

¿Qué evento te gustaría implementar primero en tu proyecto? Cuéntame en los comentarios cómo lo aplicaste.