Función que se activa cuando ocurre un evento específico, como un click, tecla presionada o carga de página.
Un event listener es una función que "escucha" y responde a eventos del DOM o de otras fuentes. El patrón de eventos permite comunicación desacoplada entre componentes. Tipos de eventos comunes: - Mouse: click, dblclick, mouseenter, mouseleave - Teclado: keydown, keyup, keypress - Formulario: submit, change, input, focus, blur - Documento: DOMContentLoaded, load, scroll, resize Los listeners modernos usan addEventListener para mejor control y removeEventListener para limpiar.
// Agregar event listener const button = document.querySelector('#myButton'); button.addEventListener('click', (event) => { console.log('Botón clickeado'); console.log('Target:', event.target); console.log('Coordenadas:', event.clientX, event.clientY); }); // Event listener con opciones element.addEventListener('scroll', handleScroll, { passive: true, // Mejor rendimiento para scroll once: true, // Se ejecuta solo una vez capture: false // Bubbling (default) vs capturing }); // Remover listener (necesita la misma función) const handleClick = () => console.log('click'); button.addEventListener('click', handleClick); button.removeEventListener('click', handleClick); // Event delegation (mejor rendimiento) document.querySelector('#list').addEventListener('click', (e) => { if (e.target.matches('li')) { console.log('Item clickeado:', e.target.textContent); } }); // Prevenir comportamiento por defecto form.addEventListener('submit', (e) => { e.preventDefault(); // Manejar submit manualmente }); // Custom events const customEvent = new CustomEvent('userLoggedIn', { detail: { userId: 123, name: 'Juan' } }); document.dispatchEvent(customEvent); document.addEventListener('userLoggedIn', (e) => { console.log('Usuario:', e.detail.name); });
