Manejo de Eventos

Añadiendo Listenos de Evento

El addEventListener() método adjunta un controlador de eventos a un elemento.

let button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

Este método proporciona varias ventajas:

• Varios escuchadores de eventos pueden ser adjuntados a un solo elemento.

• Permite quitar escuchadores de eventos más tarde.

• Proporciona una mejor separación de JavaScript de HTML.

Tipos de Eventos Comunes

Los eventos pueden ser desencadenados por acciones del usuario o interacciones del sistema.

Eventos del Ratón

• click – Desencadenado cuando un elemento es clicado.

• dblclick – Desencadenado en un doble clic.

• mouseover – Desencadenado cuando el ratón entra en un elemento.

• mouseout – Desencadenado cuando el ratón sale de un elemento.

• mousedown / mouseup – Desencadenado cuando un botón del ratón es presionado o soltado.

Ejemplo:

document.getElementById("box").addEventListener("mouseover", () => {
  console.log("Mouse entered the box!");
});

Eventos de Teclado

• keydown – Desencadenado cuando una tecla es presionada.

• keyup – Desencadenado cuando una tecla es soltada.

• keypress – (Desaprobado) Usado para detectar presiones de teclas de caracteres.

Ejemplo:

document.addEventListener("keydown", event => {
  console.log(`Key pressed: ${event.key}`);
});

Eventos de Formulario

• submit – Desencadenado cuando un formulario es enviado.

• change – Desencadenado cuando el valor de un campo de entrada cambia.

• focus / blur – Desencadenado cuando un campo de entrada gana o pierde foco.

Ejemplo:

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault(); // Prevents form submission
  console.log("Form submitted!");
});

Eventos de Ventana

• load – Desencadenado cuando la página termina de cargar.

• resize – Desencadenado cuando la ventana es redimensionada.

• scroll – Desencadenado cuando la página es desplazada.

Ejemplo:

window.addEventListener("resize", () => {
  console.log("Window resized!");
});

Objeto de Evento (event)

Cuando un evento ocurre, un objeto event es pasado automáticamente al controlador de eventos, conteniendo información útil sobre el evento.

Ejemplo:

document.addEventListener("click", event => {
  console.log("Event Type:", event.type);
  console.log("Target Element:", event.target);
  console.log("Mouse Coordinates:", event.clientX, event.clientY);
});

Propagación de Eventos (Burbujeo y Captura)

Los eventos de JavaScript se propagan a través del DOM en dos fases:

1. Fase de Captura – El evento se mueve desde el elemento raíz hasta el objetivo.

2. Fase de Burbujeo – El evento se mueve desde el objetivo de regreso al raíz.

Por defecto, los eventos burbujean.

Ejemplo de burbujeo de eventos:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked!");
});
  
document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked!");
});

Hacer clic en el elemento hijo registrará:

Para detener la propagación del evento:

document.getElementById("child").addEventListener("click", event => {
  event.stopPropagation();
  console.log("Child clicked, but event won't bubble up.");
});

Para utilizar la fase de captura, pasa true como el tercer argumento en addEventListener():

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked during capture phase.");
}, true);

Eliminando Listenos de Evento

Usa removeEventListener() para desprender un controlador de eventos.

function showMessage() {
  console.log("Button clicked!");
}
  
let button = document.getElementById("myButton");
button.addEventListener("click", showMessage);
  
// Remove the event listener
button.removeEventListener("click", showMessage);

Importante: La referencia de función debe coincidir exactamente para que removeEventListener() funcione.

Delegación de Evento

En lugar de añadir escuchadores de eventos a múltiples elementos, la delegación de eventos adjunta un solo escuchador a un elemento padre y verifica qué hijo desencadenó el evento.

document.getElementById("list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

Beneficios de la delegación de eventos:

• Mejora el rendimiento al reducir el número de escuchadores de eventos.

• Útil para elementos añadidos dinámicamente.

Previniendo el Comportamiento Predeterminado

Algunos eventos tienen comportamientos predeterminados del navegador (por ejemplo, envíos de formularios, clics en enlaces). El método event.preventDefault() previene esto.

document.getElementById("myLink").addEventListener("click", event => {
  event.preventDefault();
  console.log("Link click prevented!");
});

Conclusión

El manejo de eventos es esencial para aplicaciones web interactivas. Esta sección cubrió escuchadores de eventos, propagación de eventos, delegación de eventos y prevención de comportamientos predeterminados. La siguiente sección se centrará en trabajar con formularios e input del usuario en JavaScript.