addEventListener y objeto Event
Asocie listeners de eventos, reciba el objeto Event, use preventDefault y stopPropagation, y comprenda la propagación de eventos.
addEventListener y objeto Event es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los eventos?
Los eventos son señales que el navegador emite cuando ocurre algo: el usuario hace clic, pulsa una tecla o mueve el ratón; la página se carga; o se completa una solicitud de red. JavaScript reacciona a los eventos mediante la asociación de listeners de eventos.
Sintaxis de addEventListener
element.addEventListener(type, handler) asocia una función que se ejecutará cuando se produzca el evento. El handler recibe un objeto Event con información sobre lo ocurrido.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Tipos de eventos habituales
Ratón: click, dblclick, mouseenter, mouseleave, mousemove. Teclado: keydown, keyup, keypress. Formularios: submit, input, change, focus, blur. Documento: DOMContentLoaded, load. Ventana: resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));El objeto Event
Todos los handlers reciben un objeto Event. Propiedades clave: e.target (elemento que desencadenó el evento), e.currentTarget (elemento al que está asociado el listener), e.type (nombre del evento), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() impide la acción predeterminada del navegador. Úselo para evitar el envío de formularios, impedir la navegación de enlaces o bloquear los menús contextuales del botón derecho en juegos.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() impide que el evento siga propagándose hacia arriba por el árbol del DOM. Úselo cuando el handler de un elemento interno no deba activar el handler del elemento externo.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Propagación de eventos
Los eventos se propagan hacia arriba: después de producirse en el objetivo, se producen en el elemento padre, luego en el abuelo y así sucesivamente hasta llegar a document. Así funciona la delegación de eventos: se asocia un listener a un elemento padre y se usa e.target para identificar el elemento hijo en el que se hizo clic.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Patrón de delegación de eventos
La delegación de eventos consiste en escuchar en un elemento padre en lugar de asociar listeners a cada hijo. Es más eficiente y gestiona automáticamente los hijos añadidos de forma dinámica.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Eventos de teclado
Los eventos de teclado se producen al pulsar teclas. Use e.key (una cadena como 'Enter', 'Escape' o 'a') en el código moderno. El código antiguo usaba e.keyCode (obsoleto). e.metaKey, e.ctrlKey y e.shiftKey detectan las teclas modificadoras.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Eliminar listeners de eventos
Use removeEventListener para desvincular un listener. El handler debe ser la misma referencia de función: las funciones anónimas no se pueden eliminar. En React/Vue normalmente no tiene que gestionar esto manualmente.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Opción once
Pase { once: true } como tercer argumento para eliminar automáticamente el listener después de que se active una vez. Es útil para acciones que solo ocurren una vez, como cerrar una pantalla de inicio.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Opción capture
De forma predeterminada, los listeners se ejecutan durante la fase de propagación (hacia arriba). Pase { capture: true } para que se ejecuten durante la fase de captura (hacia abajo, antes que los propios listeners del objetivo).
Comprobación rápida
¿Qué método impide que el navegador ejecute el comportamiento predeterminado de un evento?
Repaso: eventos del DOM
addEventListener(type, handler) asocia listeners. El objeto Event proporciona target, type y métodos de control. preventDefault() bloquea los comportamientos predeterminados. stopPropagation() detiene la propagación. Use la delegación de eventos para mejorar la eficiencia y gestionar hijos dinámicos. Elimine los listeners para evitar fugas de memoria.
Preguntas frecuentes
¿La lección «addEventListener y objeto Event» es gratis?
Sí — el texto completo de «addEventListener y objeto Event» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «addEventListener y objeto Event»?
Asocie listeners de eventos, reciba el objeto Event, use preventDefault y stopPropagation, y comprenda la propagación de eventos. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «addEventListener y objeto Event»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- querySelector y querySelectorAll
- addEventListener y objeto Event
- Cambiar contenido: textContent, innerHTML y classList
- Crear y añadir elementos