JavaScript Academy · Lección

Fundamentos de addEventListener

Asocie gestores a los elementos para responder a eventos.

Fundamentos de addEventListener es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Responder a eventos

Los eventos permiten que su código reaccione a acciones del usuario, como hacer clic, pulsar teclas o enviar formularios. addEventListener es la forma estándar de suscribirse.

Sintaxis básica

Invoque addEventListener con el nombre de un evento y una función controladora. La función se ejecuta cada vez que ocurre el evento.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Funciones controladoras con nombre

Puede pasar una función con nombre. Esto mantiene el código organizado y, lo que es más importante, permite eliminar el listener más adelante.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Varios listeners

A diferencia de la antigua propiedad onclick, puede asociar varios listeners al mismo evento sin que se sobrescriban entre sí.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Para dejar de escuchar, invoque removeEventListener con el mismo nombre de evento y la misma referencia a la función que utilizó para agregarlo.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Las funciones anónimas no se pueden eliminar

Una función flecha insertada directamente crea una referencia nueva cada vez, por lo que no puede eliminarse más adelante. Use una referencia con nombre si necesita eliminarla.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

La opción once

Pasar { once: true } elimina automáticamente el listener después de que se ejecute una sola vez.

btn.addEventListener("click", init, { once: true });

La opción capture

De forma predeterminada, los listeners se ejecutan durante la fase de propagación. { capture: true } hace que se ejecuten durante la fase de captura.

parent.addEventListener("click", handler, { capture: true });

La opción passive

{ passive: true } indica que no invocará preventDefault, lo que permite al navegador optimizar el rendimiento del desplazamiento.

window.addEventListener("scroll", onScroll, { passive: true });

La opción signal

Una señal de AbortController permite eliminar uno o varios listeners mediante una cancelación, lo que resulta práctico para la limpieza.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this dentro de los controladores

En una función controladora normal, this hace referencia al elemento al que está asociado el listener. Las funciones flecha no vuelven a vincular this.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Comprobación rápida

Compruebe las reglas de eliminación.

Repaso

addEventListener(type, handler, options) se suscribe a eventos y admite varios listeners. Elimínelos con removeEventListener usando la misma referencia, por lo que es preferible utilizar funciones con nombre. Algunas opciones útiles son once, capture, passive y signal. En los controladores normales, this es el elemento de destino.

Preguntas frecuentes

¿La lección «Fundamentos de addEventListener» es gratis?

Sí — el texto completo de «Fundamentos de addEventListener» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de addEventListener»?

Asocie gestores a los elementos para responder a eventos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Fundamentos de addEventListener»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy