En JavaScript un evento es cualquier acción que ocurre en la página, como hacer clic en un botón, mover el ratón o presionar una tecla.

Los eventos permiten ejecutar código en respuesta a estas acciones, lo que hace más dinámicas a las páginas web. Para trabajar con eventos, es común usar el método addEventListener o atributos en el código HTML.

Métodos para gestionar eventos

1. Usar atributos HTML

El método más simple (aunque menos recomendado) es definir los eventos directamente en el HTML:

<button onclick="alert('Hola')">Haz clic</button>

Este enfoque funciona, pero no es escalable ni reutilizable.

2. Asignar eventos en JavaScript

Otra forma es asignar la función directamente a la propiedad del evento en el elemento:

const btn = document.querySelector("button");
btn.onclick = function () {
    alert("Hola desde JavaScript");
};

El problema con este método es que sobrescribe cualquier otra función asignada al mismo evento.

3. Usar addEventListener (la opción recomendada)

addEventListener permite agregar múltiples eventos sin sobrescribir los existentes:

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
    alert("Evento con addEventListener");
});

Además, facilita la eliminación de eventos si es necesario:

const handler = () => alert("Este evento será eliminado");
btn.addEventListener("click", handler);

// Eliminar el evento después de 5 segundos
setTimeout(() => btn.removeEventListener("click", handler), 5000);

Delegación de eventos

A veces, los elementos son generados dinámicamente o hay muchos elementos similares. En estos casos, en lugar de asignar eventos individualmente, se pueden gestionar a través de un elemento padre:

document.body.addEventListener("click", (event) => {
  if (event.target.matches(".dinamico")) {
    alert("Elemento dinámico clicado");
  }
});

Esto evita asignar eventos a cada elemento nuevo.

Prevención del comportamiento por defecto

Algunos eventos tienen comportamientos predeterminados que pueden ser innecesarios. Se pueden deshabilitar con preventDefault():

document.querySelector("a").addEventListener("click", (event) => {
  event.preventDefault(); // Evita que el enlace navegue
  alert("Navegación bloqueada");
});

Eventos más comunes en JavaScript

A continuación mostramos la mayoría de eventos que puedes usar:

Eventos de mouse

• click → Cuando se hace clic en un elemento
• dblclick → Doble clic en un elemento
• mousedown / mouseup → Cuando se presiona / suelta un botón del mouse
• mousemove → Cuando el mouse se mueve sobre un elemento
• mouseover / mouseout → Cuando el mouse entra o sale de un elemento
• mouseenter / mouseleave → Similar a mouseover / mouseout, pero sin propagación
• contextmenu → Cuando se abre el menú contextual (clic derecho)

Eventos de teclado

• keydown → Cuando se presiona una tecla
• keyup → Cuando se suelta una tecla
• keypress → Obsoleto, pero usado en versiones antiguas para capturar teclas presionadas

Eventos de formulario

• submit → Cuando se envía un formulario
• change → Cuando cambia el valor de un input, select o textarea
• input → Cuando el usuario escribe en un input o textarea
• focus / blur → Cuando un elemento recibe o pierde el foco
• reset → Cuando se restablece un formulario

Eventos de carga y recursos

• load → Cuando una página o recurso ha cargado completamente
• DOMContentLoaded → Cuando el HTML ha sido completamente cargado y parseado
• beforeunload → Antes de que la página se cierre
• unload → Cuando la página se descarga
• error → Cuando ocurre un error en la carga de un recurso

Eventos de ventana y documento

• resize → Cuando se cambia el tamaño de la ventana
• scroll → Cuando se desplaza la página
• visibilitychange → Cuando la pestaña cambia de estado (visible/oculta)

Eventos de portapapeles

• copy → Cuando se copia contenido
• cut → Cuando se corta contenido
• paste → Cuando se pega contenido

Eventos de arrastrar y soltar

• dragstart → Cuando se comienza a arrastrar un elemento
• drag → Durante el arrastre
• dragenter → Cuando el elemento arrastrado entra en una zona de destino
• dragover → Cuando el elemento arrastrado está sobre una zona de destino
• dragleave → Cuando el elemento arrastrado sale de una zona de destino
• drop → Cuando el elemento se suelta en la zona de destino
• dragend → Cuando se finaliza el arrastre

Eventos táctiles (para dispositivos móviles)

• touchstart → Cuando se toca la pantalla
• touchmove → Cuando se mueve el dedo sobre la pantalla
• touchend → Cuando se levanta el dedo de la pantalla

Conclusión

La gestión de eventos en JavaScript permite hacer la web más interactiva. Usar addEventListener, la delegación de eventos y preventDefault() mejora el control sobre las interacciones.