¿Qué es addEventListener?

addEventListener y sus usos

addEventListener es un método de JavaScript que nos permite “escuchar” un evento específico en un elemento del DOM y ejecutar una función (callback) cuando este evento sucede. Es la forma recomendada para manejar eventos sin mezclar la lógica en el HTML y permite asociar más de un evento al mismo elemento.

//Este elemento está en el HTML
<button id="miBoton">Haz clic aquí</button>

const btn = document.getElementById("miBoton");

//Asignamos un evento "click" al botón
btn.addEventListener("click", () => {
  alert("¡Has hecho click en el botón!");
});
JavaScript

Pero… ¿Qué es un evento

Un evento en JavaScript es una acción o suceso que ocurre en la página, ya sea por parte del usuario (clic, pulsación de teclas, etc.) o del propio navegador (final de carga, error, etc.). Cuando ocurre un evento, si hemos asociado una función a él, esa función se ejecuta automáticamente.

Principales tipos de eventos en JavaScript

Existen numerosos eventos en JavaScript. Aquí tienes algunos de los más comunes:

1. Eventos del ratón

  • click: cuando el usuario hace clic en un elemento.
  • dblclick: cuando se hace doble clic.
  • mouseover: cuando el ratón pasa por encima de un elemento.
  • mouseout: cuando el ratón sale de un elemento.
  • mousemove: cuando se mueve el ratón.

2. Eventos del teclado

  • keydown: cuando se presiona una tecla.
  • keyup: cuando se suelta una tecla.
  • keypress: cuando se presiona una tecla que produce un carácter (cada vez se usa menos).

3. Eventos de la página

  • load: la página o un recurso ha terminado de cargarse.
  • DOMContentLoaded: cuando el documento HTML se ha cargado y parseado.
  • scroll: cuando el usuario se desplaza por la página.
  • resize: cuando cambia el tamaño de la ventana.

4. Eventos de formularios

  • submit: cuando se envía un formulario.
  • input: cuando cambia el valor de un campo de texto, checkbox, etc.
  • focus: cuando un campo de formulario recibe el foco.
  • blur: cuando el foco abandona un campo.

5. Eventos de arrastrar y soltar

  • dragstart: al comenzar a arrastrar un elemento.
  • dragover: al arrastrar sobre una zona válida.
  • drop: al soltar el elemento arrastrado.

6. Eventos de audio y vídeo

  • play: cuando se inicia la reproducción.
  • pause: cuando se pausa.
  • ended: cuando finaliza la reproducción.

Ejemplos prácticos

Evento de ratón:

//Este elemento está en el HTML
<button id="btnHover">Pasa el ratón por aquí</button>

const btnHover = document.getElementById("btnHover");

// mouseover: se dispara al pasar el cursor por encima
btnHover.addEventListener("mouseover", () => {
  console.log("Has pasado el ratón por el botón.");
});
JavaScript

Evento de teclado:

//Este elemento está en el HTML
<input type="text" id="campoTexto" placeholder="Escribe algo..." />

const input = document.getElementById("campoTexto");

// keyup: se dispara cuando el usuario suelta una tecla
input.addEventListener("keyup", (evento) => {
  console.log("Has pulsado la tecla:", evento.key);
});
JavaScript

Evento de formulario:

//Este elemento está en el HTML
<form id="miFormulario">
  <input type="text" name="nombre" placeholder="Tu nombre" required />
  <button type="submit">Enviar</button>
</form>


const form = document.getElementById("miFormulario");

// submit: se dispara al enviar el formulario
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Evita la recarga de la página
  alert("Formulario enviado sin recargar la página");
});
JavaScript

Curiosidades y buenas prácticas

  • Remover eventos: puedes usar removeEventListener para quitar un evento que ya no necesites.
  • Fases de eventos (captura y burbuja): puedes especificar { capture: true } en addEventListener para escuchar el evento en la fase de captura en lugar de la fase de burbuja (por defecto).
  • Delegación de eventos: en lugar de asignar eventos a cada elemento hijo, asóciala a un elemento padre y usa event.target para determinar qué hijo originó el evento. Mejora el rendimiento si tienes muchos elementos.
  • Compatibilidad con navegadores antiguos: en versiones muy antiguas de Internet Explorer se usaba attachEvent, pero hoy en día addEventListener es el estándar.

Conocer estos eventos y cómo manejarlos te permitirá dar interactividad a tus sitios o aplicaciones web de forma eficaz. ¡Pruébalos y diviértete creando funcionalidades interactivas en tus proyectos!

Más contenido