Tipos de eventos en JavaScript – Con ejemplos!

Los tipos o clases de eventos en JavaScript permiten detectar y responder a las acciones del usuario y del navegador dentro del DOM. Comprender cómo funcionan eventos de mouse, teclado, formularios, ventana y multimedia es clave para crear interfaces interactivas, dinámicas y eficientes. En esta guía vas a aprender cuándo y cómo usar cada tipo de evento, con ejemplos prácticos orientados a proyectos reales.

Select 31 more words to run Humanizer.

Índice

1. ¿Qué es un evento en el DOM?

Un evento en el DOM es una notificación que el navegador genera cuando ocurre una acción relevante, ya sea:

Una interacción del usuario (click, teclado, mouse, formulario)
Un cambio del navegador (carga de la página, resize, scroll)
Un cambio en el DOM provocado por JavaScript

👉 El evento no es la acción en sí, sino el mensaje que el navegador envía diciendo: “Algo acaba de pasar sobre este elemento”

1.1. ¿Cómo funciona internamente un evento cuando ocurre una interacción?

Cuando el usuario interactúa (por ejemplo, hace click), el navegador sigue este flujo interno:

1️⃣ Ocurre la acción física

El usuario hace click con el mouse sobre un elemento visible.

2️⃣ El navegador detecta el evento

El motor del navegador:

Identifica qué tipo de evento (lo que veremos en los siguientes puntos) ocurrió (click)
Determina en qué elemento exacto ocurrió

3️⃣ Se crea el objeto `Event`

El navegador crea automáticamente un objeto especial llamado event, que contiene:

Qué pasó (type)
Dónde pasó (target)
Información extra (posición del mouse, tecla presionada, etc.)

Ejemplo conceptual:

{
  type: "click",
  target: button,
  currentTarget: button,
  bubbles: true
}
Lenguaje del código: CSS (css)

4️⃣ Se inicia la propagación del evento (event flow)

El evento viaja por el DOM siguiendo 3 fases (flujo de eventos):

Captura (del document hacia el elemento)
Target (el elemento donde ocurrió)
Burbujeo (del elemento hacia arriba)

(Esto es clave para entender delegación de eventos)

5️⃣ Se ejecutan los listeners registrados

El navegador ejecuta los addEventListener que coincidan con:

El tipo de evento
La fase correcta
El elemento correspondiente

1.2. Ejemplo básico: evento `click`

HTML

<button id="btn">Hacer click</button>Lenguaje del código: HTML, XML (xml)

JavaScript

const button = document.querySelector("#btn");

button.addEventListener("click", function (event) {
  console.log("Se hizo click");
  console.log(event);
});Lenguaje del código: JavaScript (javascript)

¿Qué pasa internamente?

El usuario hace click en el botón
El navegador detecta el click
Crea el objeto event
Ejecuta el listener
Pasa el objeto event a la función.

👇¿QUÉ TIPO DE EVENTOS EXISTEN?

2. Eventos de mouse básicos.

Los eventos de mouse permiten detectar interacciones físicas del usuario con el cursor sobre elementos del DOM. Son fundamentales para botones, drag & drop, menús, juegos, sliders y cualquier UI interactiva.

2.1. Evento `click`

Se dispara cuando el usuario:

Presiona el botón del mouse
Lo suelta
Ambas acciones ocurren sobre el mismo elemento

📌 Es un evento compuesto (mousedown + mouseup).

¿Para qué sirve?

Ejecutar acciones (botones)
Enviar datos
Abrir/cerrar elementos
Disparar lógica principal de UI

Ejemplo básico

HTML

<button id="btnClick">Click</button>Lenguaje del código: HTML, XML (xml)

JavaScript

const btn = document.querySelector("#btnClick");

btn.addEventListener("click", (event) => {
  console.log("Se ejecutó el click");
  console.log(event.type); // "click"
});Lenguaje del código: JavaScript (javascript)

Qué pasa internamente

El navegador detecta mousedown
Luego mouseup
Si ambos son válidos → dispara click

2.2. Evento `dblclick`

¿Qué es?

Se dispara cuando el usuario hace dos clicks consecutivos sobre el mismo elemento en un intervalo corto.

¿Para qué sirve?

Acciones secundarias
Edición rápida (doble click para editar)
Interfaces tipo escritorio

Ejemplo

HTML

<button id="btnDbl">Doble Click</button>Lenguaje del código: HTML, XML (xml)

JavaScript

const btn = document.querySelector("#btnDbl");

btn.addEventListener("dblclick", () => {
  console.log("Doble click detectado");
});Lenguaje del código: JavaScript (javascript)

📌 Importante: dblclick no reemplaza a click.
Si ambos están presentes, ambos se ejecutan.

Ejemplo con conflicto click + dblclick

btn.addEventListener("click", () => {
  console.log("Click simple");
});

btn.addEventListener("dblclick", () => {
  console.log("Doble click");
});Lenguaje del código: JavaScript (javascript)

Resultado en doble click:

Click simple
Click simple
Doble click

2.3. Evento `mousedown`

¿Qué es?

Se dispara en el momento exacto en que el botón del mouse es presionado, antes de soltarlo.

¿Para qué sirve?

Iniciar drag & drop
Detectar presión continua
Juegos o controles personalizados

Ejemplo

HTML

<div id="box" style="width:100px;height:100px;background:red;"></div>
Lenguaje del código: HTML, XML (xml)

JavaScript

const box = document.querySelector("#box");

box.addEventListener("mousedown", (event) => {
  console.log("Mouse presionado");
  console.log(event.button); // 0 izquierdo, 1 medio, 2 derecho
});Lenguaje del código: JavaScript (javascript)

📌 mousedown ocurre aunque no se suelte el mouse.

2.4. Evento `mouseup`

¿Qué es?

Se dispara cuando el usuario suelta el botón del mouse.

¿Para qué sirve?

Finalizar acciones iniciadas con mousedown
Confirmar arrastres
Detectar liberación del click

Ejemplo

box.addEventListener("mouseup", () => {
  console.log("Mouse liberado");
});Lenguaje del código: JavaScript (javascript)

2.5. Relación entre `mousedown`, `mouseup` y `click`

Flujo real del navegador

mousedown → mouseup → click

Ejemplo demostrativo

box.addEventListener("mousedown", () => {
  console.log("mousedown");
});

box.addEventListener("mouseup", () => {
  console.log("mouseup");
});

box.addEventListener("click", () => {
  console.log("click");
});
Lenguaje del código: JavaScript (javascript)

Salida al hacer click

mousedown
mouseup
click

2.6. Diferencia clave entre estos eventos.

Evento	Momento exacto	Uso típico
`mousedown`	Al presionar	Iniciar acción
`mouseup`	Al soltar	Finalizar acción
`click`	Presionar + soltar	Acción principal
`dblclick`	Dos clics seguidos	Acción secundaria

3. Eventos de teclado en JavaScript

Los eventos de teclado permiten detectar acciones del usuario al presionar teclas y son clave para formularios, atajos, juegos, validaciones y accesibilidad.

¿Qué son los eventos de teclado?

Son eventos del DOM que el navegador dispara cuando el usuario interactúa con el teclado.

Los principales son:

keydown → cuando la tecla se presiona
keyup → cuando la tecla se libera

📌 Ambos generan un objeto KeyboardEvent.

3.1. Evento `keydown`

¿Qué es?

Se dispara en el instante exacto en que una tecla es presionada.

Se ejecuta una vez por pulsación
Si la tecla se mantiene presionada, se repite automáticamente

¿Para qué sirve?

Detectar atajos (Ctrl + S)
Juegos (movimiento continuo)
Bloquear teclas
Validar entradas antes de que aparezcan

Ejemplo básico

<input id="input" type="text" />Lenguaje del código: HTML, XML (xml)

const input = document.querySelector("#input");

input.addEventListener("keydown", (event) => {
  console.log("Tecla presionada:", event.key);
});Lenguaje del código: JavaScript (javascript)

Explicación

El usuario presiona una tecla
El navegador dispara keydown
event.key indica qué tecla fue presionada

Ejemplo de salida:

Tecla presionada: a

3.2. Evento `keyup`

¿Qué es?

Se dispara cuando el usuario suelta la tecla.

No se repite
Representa el fin de la acción

¿Para qué sirve?

Validar texto final
Ejecutar acciones al terminar de escribir
Confirmar comandos

Ejemplo

input.addEventListener("keyup", (event) => {
  console.log("Tecla liberada:", event.key);
});Lenguaje del código: JavaScript (javascript)

Diferencia clara

keydown → inicio
keyup → fin

3.3. Objeto `KeyboardEvent`: propiedades clave.

3.3.1. ¿Qué es el objeto `KeyboardEvent`?

El KeyboardEvent es el objeto que el navegador crea automáticamente cada vez que ocurre un evento de teclado, como:

keydown
keyup

Ese objeto contiene toda la información sobre la interacción del teclado en ese momento.

👉 En otras palabras:
el evento es el hecho,
el KeyboardEvent es el paquete de datos que describe ese hecho.

3.3.2. ¿Cuándo existe un `KeyboardEvent`?

document.addEventListener("keydown", (event) => {
  console.log(event);
});
Lenguaje del código: JavaScript (javascript)

keydown → evento
event → instancia de KeyboardEvent

3.3.3. ¿Qué son las propiedades del `KeyboardEvent`?

Las propiedades son datos que describen:

qué tecla fue presionada
cómo fue presionada
en qué contexto ocurrió

Se acceden usando:

event.propiedadLenguaje del código: CSS (css)

3.3.4. Propiedades clave del objeto `KeyboardEvent`

Propiedad	Descripción
`key`	Valor de la tecla
`code`	Tecla física
`ctrlKey`	Ctrl presionada
`shiftKey`	Shift presionada
`altKey`	Alt presionada

3.4. `keydown` vs `keyup` (comparación)

Característica	keydown	keyup
Momento	Al presionar	Al soltar
Repetición	Sí	No
Uso típico	Control continuo	Confirmación

3.5. Buenas prácticas

✔ Usar keydown para detectar intención
✔ Usar keyup para procesar resultados
✔ Preferir event.key sobre keyCode (obsoleto)
✔ Manejar atajos a nivel document con cuidado

4. Eventos de formularios básicos en JavaScript

Los eventos de formulario permiten reaccionar cuando el usuario:

envía un formulario
cambia valores
entra o sale de un campo

Los principales:

submit
change
focus
blur

4.1. Evento `input`

¿Qué es el evento input?

El evento input es un evento del DOM que se dispara cada vez que el valor de un campo cambia, en tiempo real, mientras el usuario escribe, borra, pega o usa autocompletado.

📌 Se dispara inmediatamente después de que el valor del input cambia.

¿Para qué sirve?

Se usa principalmente para:

Escuchar cambios en tiempo real
Crear formularios dinámicos
Validar datos mientras el usuario escribe
Mostrar resultados instantáneos (búsquedas, filtros)
Mejorar la experiencia de usuario (UX)

Diferencia clave con change

Evento	¿Cuándo se dispara?
`input`	En cada cambio del valor
`change`	Al perder el foco

👉 Para tiempo real → input
👉 Para confirmación → change

Ejemplo: Escuchar texto en tiempo real.

HTML

<input id="name" type="text" placeholder="Escribí tu nombre" />
<p id="output"></p>
Lenguaje del código: HTML, XML (xml)

JavaScript

const input = document.querySelector("#name");
const output = document.querySelector("#output");

input.addEventListener("input", (event) => {
  output.textContent = event.target.value;
});
Lenguaje del código: JavaScript (javascript)

Explicación

El usuario escribe una letra
El valor del input cambia
El navegador dispara input
event.target.value obtiene el texto actual
Se actualiza el DOM en tiempo real

4.2. Evento `submit`

¿Qué es?

Se dispara cuando el usuario intenta enviar un formulario.

👉 Puede activarse:

al hacer click en un botón type="submit"
al presionar Enter en un input

Ejemplo correcto de uso (submit siempre en el <form>)

HTML

<form id="loginForm">
  <input type="text" name="user" placeholder="Usuario">
  <button type="submit">Enviar</button>
</form>
Lenguaje del código: HTML, XML (xml)

JavaScript

const form = document.querySelector("#loginForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Formulario enviado");
});
Lenguaje del código: JavaScript (javascript)

Explicación

El navegador intenta enviar el formulario
Se dispara submit
preventDefault() evita la recarga
Se maneja el envío con JavaScript

✔ Buena práctica: siempre escuchar submit en el <form>, no en el botón.

4.3. Evento `change`

¿Qué es?

Se dispara cuando el valor de un campo cambia y se confirma.

👉 La confirmación ocurre cuando:

el usuario sale del campo
o selecciona una opción (select, checkbox, radio)

Ejemplo con input

HTML

<input type="text" id="nameInput" placeholder="Nombre">
Lenguaje del código: HTML, XML (xml)

JavaScript

const input = document.querySelector("#nameInput");

input.addEventListener("change", () => {
  console.log("Valor cambiado:", input.value);
});
Lenguaje del código: JavaScript (javascript)

Importante

No se ejecuta mientras escribís
Se ejecuta al perder el foco

4.4. Evento `focus`

¿Qué es?

Se dispara cuando un elemento recibe el foco (el cursor entra en el campo).

Ejemplo

<input type="text" id="email" placeholder="Email">
Lenguaje del código: HTML, XML (xml)

const email = document.querySelector("#email");

email.addEventListener("focus", () => {
  console.log("Campo enfocado");
});
Lenguaje del código: JavaScript (javascript)

Uso común

Mostrar mensajes de ayuda
Resaltar campos
UX y accesibilidad

4.5. Evento `blur`

¿Qué es?

Se dispara cuando un elemento pierde el foco.

Ejemplo

email.addEventListener("blur", () => {
  console.log("Campo sin foco");
});Lenguaje del código: JavaScript (javascript)

Uso común

Validaciones
Limpieza de estilos
Verificación final de datos

5. Eventos de carga del documento

DOMContentLoaded vs load

Estos eventos indican etapas distintas del proceso de carga de una página web.

5.1. Evento `DOMContentLoaded`

Definición

DOMContentLoaded se dispara cuando:

✔ El HTML fue completamente cargado y parseado
✔ El DOM ya está construido
❌ No espera a que carguen imágenes, videos, iframes, fuentes, etc.

👉 Es el evento más usado para inicializar JavaScript que manipula el DOM.

Ejemplo con DOMContentLoaded

<!DOCTYPE html>
<html>
<head>
  <title>DOMContentLoaded</title>
</head>
<body>

  <button id="btn">Click</button>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        console.log("Botón listo y funcionando");
      });
    });
  </script>

</body>
</html>
Lenguaje del código: HTML, XML (xml)

Explicación

El navegador carga y parsea el HTML
Construye el DOM
Se dispara DOMContentLoaded
El botón ya existe y puede usarse

✔ Evita errores como null al hacer querySelector

5.2. Evento `load`

Definición

load se dispara cuando:

✔ El HTML está cargado
✔ El DOM está listo
✔ Todos los recursos externos terminaron de cargar
(imágenes, CSS, fuentes, iframes, etc.)

👉 Es más lento, pero garantiza que todo esté disponible.

Ejemplo con load

<img src="imagen-grande.jpg" id="img">

<script>
  window.addEventListener("load", () => {
    const img = document.querySelector("#img");
    console.log("Imagen cargada:", img.width, img.height);
  });
</script>
Lenguaje del código: HTML, XML (xml)

Explicación

Espera a que la imagen termine de cargarse
Permite acceder a dimensiones reales
Ideal para cálculos visuales

5.3. Diferencia clave entre ambos

Evento	¿Qué espera?	Uso principal
`DOMContentLoaded`	Solo HTML + DOM	Inicializar JS
`load`	HTML + DOM + recursos	Medidas, gráficos

5.4. ¿Cuándo usar cada uno?

Usar DOMContentLoaded cuando:

✔ Vas a agregar eventos
✔ Vas a manipular el DOM
✔ Querés mejorar performance
✔ Trabajás con formularios o botones

Usar load cuando:

✔ Necesitás tamaños reales de imágenes
✔ Trabajás con canvas
✔ Dependés de recursos externos

5.5. Alternativa moderna: `defer`

<script src="app.js" defer></script>Lenguaje del código: HTML, XML (xml)

👉 Con defer:

El script espera al DOM
No necesitás DOMContentLoaded
Es la mejor práctica moderna

5.6. Buenas prácticas profesionales

✔ Preferir DOMContentLoaded
✔ Usar load solo cuando sea necesario
✔ Usar defer siempre que puedas
❌ No ejecutar JS antes del DOM
❌ No abusar de window.onload

RESUMEN:

DOMContentLoaded → DOM listo
load → todo listo
DOMContentLoaded es más rápido
load es más completo
defer suele reemplazarlos

6. Eventos de ventana y viewport

scroll y resize

Estos eventos permiten reaccionar a cambios en el viewport:

desplazamiento de la página
cambio de tamaño de la ventana

6.1. Evento `scroll`

¿Qué es?

Se dispara cada vez que el usuario se desplaza (scroll) por la página.

👉 Puede ejecutarse decenas o cientos de veces por segundo.

Ejemplo básico (NO óptimo)

window.addEventListener("scroll", () => {
  console.log(window.scrollY);
});Lenguaje del código: JavaScript (javascript)

Problema

Se ejecuta demasiadas veces
Puede afectar el rendimiento
Bloquea el hilo principal si hay lógica pesada

6.2. Evento `resize`

¿Qué es?

Se dispara cuando el usuario cambia el tamaño de la ventana.

window.addEventListener("resize", () => {
  console.log(window.innerWidth, window.innerHeight);
});
Lenguaje del código: JavaScript (javascript)

👉 En desktop se dispara muchas veces mientras se arrastra la ventana.

7. Eventos táctiles en JavaScript

Los eventos táctiles son eventos del DOM que el navegador dispara cuando el usuario toca la pantalla con uno o más dedos en dispositivos táctiles (celulares, tablets).

A diferencia del mouse:

No hay cursor
Puede haber varios puntos de contacto al mismo tiempo
El evento transporta información de cada dedo

Los más básicos son:

touchstart → cuando el dedo toca la pantalla
touchend → cuando el dedo se levanta

Se usan para:

Botones táctiles
Gestos (tap, swipe, long press)
Juegos móviles
Interfaces personalizadas
Evitar retrasos o comportamientos no deseados del navegador

7.1. Evento `touchstart`

¿Qué es?

Se dispara en el momento exacto en que uno o más dedos tocan la pantalla.

👉 Equivalente táctil a mousedown.

Ejemplo básico

HTML

<div id="box"></div>Lenguaje del código: HTML, XML (xml)

#box {
  width: 150px;
  height: 150px;
  background: steelblue;
}Lenguaje del código: CSS (css)

JavaScript

const box = document.querySelector("#box");

box.addEventListener("touchstart", (event) => {
  console.log("Pantalla tocada");
  console.log(event.touches.length);
});Lenguaje del código: JavaScript (javascript)

Explicación

El usuario toca el elemento
El navegador dispara touchstart
event.touches contiene los dedos activos
length indica cuántos dedos hay en pantalla

7.2. Evento `touchend`

¿Qué es?

Se dispara cuando uno o más dedos se levantan de la pantalla.

👉 Equivalente táctil a mouseup.

Ejemplo

box.addEventListener("touchend", () => {
  console.log("Dedo levantado");
});Lenguaje del código: JavaScript (javascript)

Flujo típico táctil

touchstart → touchend

(Si hay movimiento intermedio: touchmove)

8. Eventos de arrastre (Drag & Drop)

El Drag & Drop es un sistema de eventos del DOM que permite:

Arrastrar un elemento
Soltarlo en otro
Ejecutar lógica durante ese proceso

Está basado en una secuencia de eventos que el navegador gestiona automáticamente.

8.1. Eventos principales del Drag & Drop

Evento	Cuándo ocurre
`dragstart`	Comienza el arrastre
`drag`	Mientras se arrastra
`dragend`	Termina el arrastre
`dragover`	Elemento pasa por una zona válida
`drop`	Elemento se suelta

📌 Los más importantes para empezar:
dragstart, dragover, drop

👉 Requisito clave: draggable

Solo los elementos con draggable="true" pueden arrastrarse.

<div id="item" draggable="true">Arrastrame</div>Lenguaje del código: HTML, XML (xml)

8.2. Ejemplo: Drag & Drop básico

HTML

<div id="item" draggable="true">Caja</div>
<div id="zone">Zona de destino</div>Lenguaje del código: HTML, XML (xml)

#item {
  width: 100px;
  padding: 10px;
  background: steelblue;
  color: white;
  cursor: grab;
}

#zone {
  width: 200px;
  height: 150px;
  border: 2px dashed #555;
  margin-top: 20px;
}Lenguaje del código: CSS (css)

JavaScript

const item = document.querySelector("#item");
const zone = document.querySelector("#zone");

item.addEventListener("dragstart", (event) => {
  console.log("Arrastre iniciado");
});

zone.addEventListener("dragover", (event) => {
  event.preventDefault(); // Obligatorio
});

zone.addEventListener("drop", () => {
  zone.appendChild(item);
  console.log("Elemento soltado");
});Lenguaje del código: JavaScript (javascript)

Explicación paso a paso:

El usuario comienza a arrastrar → dragstart
El elemento pasa sobre la zona → dragover
preventDefault() habilita el drop
El usuario suelta → drop
Se mueve el elemento en el DOM

8.3. Errores comunes

❌ Olvidar preventDefault() en dragover
❌ No usar draggable="true"
❌ Lógica pesada en drag (se dispara muchas veces)

8.4. Buenas prácticas

✔ Usar dragstart + drop como base
✔ Dar feedback visual al usuario
✔ Mantener simple el drag
✔ Evaluar alternativas para mobile

9. Mejores prácticas en la gestión de eventos

9.1. Usar siempre `addEventListener`

Práctica: Evita asignar listeners directamente en el HTML (<button onclick="miFuncion()">) o usar las propiedades del DOM (elemento.onclick = miFuncion). Usa siempre el método addEventListener().

Código Pobre	Código Correcto (Mejor Práctica)
`<button onclick="alerta()">Click</button>`	`document.getElementById('boton').addEventListener('click', alerta);`
`miBoton.onclick = function() { ... };`	`miBoton.addEventListener('click', function() { ... });`

Explicación:

Múltiples Handlers: addEventListener permite asignar múltiples funciones handler al mismo evento de un elemento (la propiedad onclick solo permite una, sobrescribiendo las anteriores).
Separación de Preocupaciones: Mantiene el JavaScript y el HTML limpios e independientes.
Control del Flujo: Permite especificar la fase de Captura/Burbujeo (el tercer argumento).

9.2. Implementar delegación de eventos

Esta es la práctica más importante para la eficiencia y la escalabilidad.

Práctica: En lugar de adjuntar un listener a cada elemento hijo (como 100 elementos de una lista <li>), adjúntalo a un único elemento padre. Luego, usa la propiedad event.target dentro del handler para identificar qué hijo fue clicado.

9.2.1. Ejemplo de delegación

Imagina una lista que se genera dinámicamente:

HTML

<ul id="listaDeTareas">
  <li>Tarea 1</li>
  <li>Tarea 2</li>
  </ul>

<script>
    const lista = document.getElementById('listaDeTareas');

    // MALA PRÁCTICA: adjuntar un listener a cada <li>
    // lista.querySelectorAll('li').forEach(li => {
    //     li.addEventListener('click', manejarClickEnTarea);
    // });

    // MEJOR PRÁCTICA: Delegación
    lista.addEventListener('click', function(event) {
        // 1. Verificamos que el click haya ocurrido en un <li>
        if (event.target.tagName === 'LI') {
            console.log(`Tarea completada: ${event.target.textContent}`);
            event.target.classList.toggle('completada');
            
            // 2. Si la lista crece después, los nuevos <li> funcionan automáticamente.
        }
    });
</script>Lenguaje del código: HTML, XML (xml)

Explicación:

Eficiencia: Solo tienes un handler en la memoria, en lugar de 100 o más. Esto mejora el rendimiento.
Elementos Dinámicos: Funciona automáticamente para elementos que se añaden al DOM después de que se haya cargado la página, sin necesidad de reasignar listeners.

9.3. Usar el objeto `Event` de forma inteligente

El objeto event que se pasa a tu handler contiene información vital. Úsala para:

9.3.1. Prevenir el comportamiento por defecto

Práctica: Para evitar que un enlace (<a>) navegue o que un formulario (<form>) se envíe de forma predeterminada, usa event.preventDefault().

const formulario = document.getElementById('miForm');

formulario.addEventListener('submit', function(event) {
    // Evita que la página se recargue (comportamiento por defecto del submit)
    event.preventDefault(); 
    
    // Aquí puedes realizar validaciones y enviar datos con AJAX/fetch
    console.log("Formulario validado y listo para enviar vía fetch...");
});Lenguaje del código: JavaScript (javascript)

9.3.2. Evitar el burbujeo excesivo

Práctica: Si sabes que la interacción no debe afectar a los padres del elemento, usa event.stopPropagation(), pero úsalo con moderación, ya que puede romper la delegación de eventos.

9.4. Limpiar listeners (`removeEventListener`)

Práctica: Cuando un elemento que tiene un listener se elimina del DOM o tu aplicación pasa a una nueva vista (en aplicaciones de una sola página, SPA), debes eliminar el listener asociado si ya no es necesario.

const boton = document.getElementById('miBoton');
const miFuncion = function() { console.log('Click'); };

// 1. Añadir el listener
boton.addEventListener('click', miFuncion);

// ... Más tarde, cuando el elemento ya no es relevante
// 2. Remover el listener, usando la misma referencia de la función
boton.removeEventListener('click', miFuncion);Lenguaje del código: JavaScript (javascript)

Explicación:

Prevenir Fugas de Memoria (Memory Leaks): Si un elemento es eliminado del DOM pero su listener sigue vivo en la memoria, puede causar una fuga. removeEventListener asegura que la función handler y el elemento pueden ser liberados por el recolector de basura.
Importante: Solo puedes remover listeners si la función handler fue definida como una función con nombre (o una variable) y no como una función anónima inline.

9.5. Debouncing y throttling para eventos de alta frecuencia

Práctica: Eventos como scroll, resize (cambio de tamaño de ventana) o mousemove se disparan cientos de veces por segundo, lo que puede sobrecargar el navegador. Usa técnicas de optimización:

Debouncing: Ejecuta la función solo después de que la serie de eventos haya terminado (Ej: esperar a que el usuario termine de teclear en un campo de búsqueda).
Throttling: Garantiza que la función se ejecute como máximo una vez en un intervalo de tiempo fijo (Ej: actualizar la posición del scroll cada 200ms)

9.5.1. Ejemplo de throttle (requiere una función auxiliar para la lógica del timing)

window.addEventListener('scroll', throttle(function() {
    // Esta función SÓLO se ejecutará una vez cada 200 milisegundos, 
    // sin importar cuántas veces burbujee el evento 'scroll'.
    console.log("Scroll manejado eficientemente.");
}, 200));Lenguaje del código: JavaScript (javascript)

Tipos de eventos en JavaScript – Con ejemplos!

Índice

1. ¿Qué es un evento en el DOM?

1.1. ¿Cómo funciona internamente un evento cuando ocurre una interacción?

1️⃣ Ocurre la acción física

2️⃣ El navegador detecta el evento

3️⃣ Se crea el objeto Event

4️⃣ Se inicia la propagación del evento (event flow)

5️⃣ Se ejecutan los listeners registrados

1.2. Ejemplo básico: evento click

2. Eventos de mouse básicos.

2.1. Evento click

2.2. Evento dblclick

2.3. Evento mousedown

2.4. Evento mouseup

2.5. Relación entre mousedown, mouseup y click

2.6. Diferencia clave entre estos eventos.

3. Eventos de teclado en JavaScript

3.1. Evento keydown

3.2. Evento keyup

3.3. Objeto KeyboardEvent: propiedades clave.

3.3.1. ¿Qué es el objeto KeyboardEvent?

3.3.2. ¿Cuándo existe un KeyboardEvent?

3.3.3. ¿Qué son las propiedades del KeyboardEvent?

3.3.4. Propiedades clave del objeto KeyboardEvent

3.4. keydown vs keyup (comparación)

3.5. Buenas prácticas

4. Eventos de formularios básicos en JavaScript

4.1. Evento input

4.2. Evento submit

4.3. Evento change

4.4. Evento focus

4.5. Evento blur

5. Eventos de carga del documento

5.1. Evento DOMContentLoaded

5.2. Evento load

5.3. Diferencia clave entre ambos

5.4. ¿Cuándo usar cada uno?

5.5. Alternativa moderna: defer

5.6. Buenas prácticas profesionales

6. Eventos de ventana y viewport

6.1. Evento scroll

6.2. Evento resize

7. Eventos táctiles en JavaScript

7.1. Evento touchstart

7.2. Evento touchend

8. Eventos de arrastre (Drag & Drop)

8.1. Eventos principales del Drag & Drop

8.2. Ejemplo: Drag & Drop básico

8.3. Errores comunes

8.4. Buenas prácticas

9. Mejores prácticas en la gestión de eventos

9.1. Usar siempre addEventListener

9.2. Implementar delegación de eventos

9.2.1. Ejemplo de delegación

9.3. Usar el objeto Event de forma inteligente

9.3.1. Prevenir el comportamiento por defecto

9.3.2. Evitar el burbujeo excesivo

9.4. Limpiar listeners (removeEventListener)

9.5. Debouncing y throttling para eventos de alta frecuencia

9.5.1. Ejemplo de throttle (requiere una función auxiliar para la lógica del timing)

Deja un comentario Cancelar respuesta

3️⃣ Se crea el objeto `Event`

1.2. Ejemplo básico: evento `click`

2.1. Evento `click`

2.2. Evento `dblclick`

2.3. Evento `mousedown`

2.4. Evento `mouseup`

2.5. Relación entre `mousedown`, `mouseup` y `click`

3.1. Evento `keydown`

3.2. Evento `keyup`

3.3. Objeto `KeyboardEvent`: propiedades clave.

3.3.1. ¿Qué es el objeto `KeyboardEvent`?

3.3.2. ¿Cuándo existe un `KeyboardEvent`?

3.3.3. ¿Qué son las propiedades del `KeyboardEvent`?

3.3.4. Propiedades clave del objeto `KeyboardEvent`

3.4. `keydown` vs `keyup` (comparación)

4.1. Evento `input`

4.2. Evento `submit`

4.3. Evento `change`

4.4. Evento `focus`

4.5. Evento `blur`

5.1. Evento `DOMContentLoaded`

5.2. Evento `load`

5.5. Alternativa moderna: `defer`

6.1. Evento `scroll`

6.2. Evento `resize`

7.1. Evento `touchstart`

7.2. Evento `touchend`

9.1. Usar siempre `addEventListener`

9.3. Usar el objeto `Event` de forma inteligente

9.4. Limpiar listeners (`removeEventListener`)