JS 13: Eventos Avanzados

1. Función Anónima o Arrow

Rápida pero imposible de borrar individualmente después.

btn.addEventListener("click", (e) => {
    console.log("Hola");
});

2. Función Externa (Nombrada)

Limpio y permite usar removeEventListener.

function saludar() { console.log("Hola"); }

btn.addEventListener("click", saludar);
// Luego puedes borrarlo:
btn.removeEventListener("click", saludar);

e.target

El elemento original que recibió la acción. Puede ser un hijo muy profundo (un icono dentro de un botón).

e.currentTarget

El elemento que está escuchando. Siempre es el elemento al que le pusiste el código.

1. clientX / clientY (Ventana)

Son las coordenadas respecto a la ventana visible del navegador (viewport). Si haces scroll, el punto (0,0) sigue siendo la esquina superior izquierda de lo que ves.

Uso típico: Tooltips fijos (position: fixed) o elementos que siguen al ratón tipo "custom cursor".

// Mover un elemento 'fijo' con el ratón
window.addEventListener("mousemove", (e) => {
    tooltip.style.left = e.clientX + "px";
    tooltip.style.top = e.clientY + "px";
});

2. pageX / pageY (Documento)

Son relativas al documento completo. Si has hecho scroll hacia abajo 500px, pageY será 500px mayor que clientY. Es la más usada para posicionar elementos absolutos en la página.

Uso típico: Arrastrar y soltar (Drag & Drop), menús contextuales personalizados que aparecen donde haces click.

// Posicionar un menú justo donde hiciste click
document.addEventListener("click", (e) => {
    menu.style.position = "absolute";
    menu.style.left = e.pageX + "px";
    menu.style.top = e.pageY + "px";
});

3. screenX / screenY (Monitor)

Son relativas a la pantalla física de tu monitor. Raramente se usan en diseño web, salvo para juegos o popups.

Uso típico: Juegos de múltiples ventanas, analítica de usuario (mapas de calor), o popups en segunda pantalla.

// Abrir un popup en la esquina de la pantalla
document.addEventListener("click", (e) => {
    console.log(`Click físico en: ${e.screenX}, ${e.screenY}`);
    window.open(url, "_blank", `left=${e.screenX},top=${e.screenY}`);
});

4. offsetX / offsetY (Elemento)

Son relativas al borde superior-izquierdo del elemento donde ocurrió el evento. Muy útil para saber dónde hiciste click dentro de un botón o imagen.

Uso típico: Canvas de dibujo (paint), calcular dónde hiciste click en una barra de progreso de video.

// Dibujar en un canvas donde pulsas
canvas.addEventListener("mousedown", (e) => {
    ctx.moveTo(e.offsetX, e.offsetY);
    ctx.lineTo(e.offsetX + 1, e.offsetY + 1);
    ctx.stroke();
});

🖱️ Eventos de Ratón (Mouse Events)

Permiten interactuar con el puntero y los botones del ratón.

• click: Se activa al presionar y soltar el botón principal.
• dblclick: Pulsar dos veces seguidas rápidamente.
• mousedown / mouseup: Se activan al presionar o soltar cualquier botón, respectivamente.
• mouseenter / mouseleave: El puntero entra o sale de los límites de un elemento (no burbujean).
• mouseover / mouseout: Similares a los anteriores, pero se activan también al entrar en elementos hijos.
• mousemove: Se dispara continuamente mientras el ratón se mueve sobre un elemento.
• contextmenu: Se activa al intentar abrir el menú contextual (clic derecho).

⌨️ Eventos de Teclado (Keyboard Events)

Detectan la interacción física con las teclas.

• keydown: Se activa en el momento en que se presiona una tecla.
• keyup: Se activa cuando se suelta la tecla.
• keypress: (En desuso) Se activaba al presionar teclas que producen caracteres. Se recomienda usar keydown o el evento input.

De Formulario

• submit: Se activa al enviar un formulario.
• change: Cuando el valor de un elemento cambia y pierde el foco (en select u input).
• input: Se dispara inmediatamente cada vez que el valor de un campo cambia (ideal para validación en tiempo real).
• focus / blur: Un elemento gana o pierde el foco (clic en un input o tabulación).

De Ventana y Carga

• load: El navegador ha terminado de cargar toda la página (incluyendo imágenes y estilos).
• DOMContentLoaded: El HTML ha sido completamente cargado y procesado, sin esperar a imágenes.
• resize: Cuando se cambia el tamaño de la ventana del navegador.
• scroll: Cuando el usuario se desplaza por el documento.

1. En Formularios (El más usado)

Evita que la página se recargue al pulsar "Enviar", permitiéndonos validar los datos o enviarlos por Fetch/AJAX.

form.addEventListener("submit", (e) => {
    e.preventDefault(); 
    console.log("Validando... enviaré los datos sin recargar la página");
});

2. En Enlaces (<a>)

Evita que el navegador salte a otra URL. Útil para pestañas, abrir modales o efectos de scroll suave.

link.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("El enlace no navegará, abriré un popup en su lugar");
});

3. Menú Contextual (Click derecho)

Puedes evitar que aparezca el menú típico del navegador para poner el tuyo propio o proteger contenido.

window.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    alert("Menú contextual desactivado en esta zona");
});

4. Restricción de Teclado

Evita que el usuario escriba ciertos caracteres en un campo de texto.

input.addEventListener("keydown", (e) => {
    if (e.key === "e" || e.key === "E") {
        e.preventDefault(); // Impedimos escribir la letra 'e'
    }
});

Debounce (El que espera)

Espera a que el usuario "pare" de hacer la acción antes de ejecutar (ej: buscar en un buscador mientras escribes).

Throttle (El que limita)

Ejecuta la acción máximo una vez cada X milisegundos (ej: actualizar posición en un scroll).