AddEventListener en JavaScript: eventos click, input y submit

AddEventListener en JavaScript permite ejecutar una función cuando ocurre un evento, como un clic, una escritura o un envío de formulario. Recibe el nombre del evento y una función que se llamará cuando suceda.

const boton = document.querySelector("#accion");
boton.addEventListener("click", () => {
  console.log("Botón activado");
});

Para que funcione, el botón debe existir cuando se registra el evento. Sitúa el script después del HTML o utiliza un archivo externo cargado con defer.

Ejemplo completo: actualizar un saludo al escribir

<label for="nombre">Tu nombre</label>
<input id="nombre" type="text" autocomplete="given-name">
<p id="saludo" aria-live="polite">Escribe tu nombre.</p>
<script>
  const campo = document.querySelector("#nombre");
  const salida = document.querySelector("#saludo");

  campo.addEventListener("input", event => {
    const nombre = event.currentTarget.value.trim();
    salida.textContent = nombre ? "Hola, " + nombre : "Escribe tu nombre.";
  });
</script>

Input responde a los cambios de edición del control. Utilizamos textContent para mostrar lo escrito como texto. Un evento change tiene otro momento de activación según el control, por lo que no siempre produce una actualización mientras escribes.

Pasar una función no es ejecutarla

function mostrarMensaje() {
  console.log("Acción completada");
}

boton.addEventListener("click", mostrarMensaje);
// Evita: boton.addEventListener("click", mostrarMensaje());

En la segunda variante se ejecuta la función al registrar el evento y se intenta usar su resultado como listener. Si necesitas argumentos, envuelve la llamada:

boton.addEventListener("click", () => mostrarMensaje());

Submit y preventDefault

Escuchar el envío del formulario cubre más formas de activarlo que escuchar únicamente el clic de su botón.

<form id="busqueda">
  <label for="consulta">Buscar tutorial</label>
  <input id="consulta" name="consulta" required>
  <button type="submit">Buscar</button>
</form>
<p id="resultado" role="status"></p>
<script>
  document.querySelector("#busqueda").addEventListener("submit", event => {
    event.preventDefault();
    const datos = new FormData(event.currentTarget);
    document.querySelector("#resultado").textContent =
      "Consulta de demostración: " + datos.get("consulta");
  });
</script>

PreventDefault cancela la acción predeterminada si el evento lo permite; aquí evitamos la navegación del envío. El ejemplo no consulta un servidor ni guarda información. La validación nativa se mantiene: un campo obligatorio vacío puede impedir que se produzca el submit.

Target y currentTarget

Target señala el elemento donde se originó el evento en casos habituales. CurrentTarget es el elemento cuyo listener se está ejecutando. Si pulsas un icono dentro de un botón, esa distinción puede explicar por qué una propiedad no está donde la esperabas.

Cómo retirar un listener

function registrarClick() { console.log("Clic"); }
boton.addEventListener("click", registrarClick);
boton.removeEventListener("click", registrarClick);

Necesitas conservar la referencia a la función y respetar el valor de captura correspondiente. Crear otra función con el mismo texto no equivale a reutilizar la misma referencia.

Errores frecuentes

• Escribir onclick en lugar de click como nombre del evento.
• Encontrar null porque el selector no coincide o se ejecuta demasiado pronto.
• Registrar repetidamente callbacks distintos al actualizar una vista.
• Usar un div clicable cuando corresponde un botón nativo.

Preguntas frecuentes

¿Puedo ejecutar el listener una sola vez?

Sí, usando la opción { once: true } al registrarlo.

¿PreventDefault evita la propagación?

No. Cancelar la acción predeterminada y controlar la propagación son operaciones diferentes.

Amplía la base con la guía del DOM y la validación de formularios.

Referencia técnica: documentación de MDN.