Event Listeners

Maneja interacciones del usuario con event listeners en JavaScript

Event Listeners

Los event listeners permiten que tu aplicación web responda a las acciones del usuario como clicks, teclas presionadas, movimientos del mouse y más. Son fundamentales para crear interfaces interactivas.

¿Qué es un Event Listener?

Un event listener es una función que “escucha” un evento específico en un elemento y ejecuta código cuando ese evento ocurre.

elemento.addEventListener(tipoDeEvento, funcionManejadora);

Eventos Click

El evento más común es el click del mouse.

var clickCount = 0;

function configurarEventos() {
    console.log('Configurando eventos...');
    // Evento click
    document.getElementById('btn-click').addEventListener('click', function() {
        clickCount++;
        document.getElementById('resultado').textContent = 'Botón clickeado ' + clickCount + ' veces';
        console.log('Click número:', clickCount);
    });
}

Estructura del Event Listener

1. Seleccionar el elemento

   Primero, selecciona el elemento que quieres escuchar.

   const boton = document.getElementById('btn-click');
   
2. Agregar el listener

   Usa addEventListener con el tipo de evento y la función manejadora.

   boton.addEventListener('click', function() {
       console.log('¡Click!');
   });
   
3. Ejecutar lógica

   Dentro de la función manejadora, escribe el código que debe ejecutarse.

   boton.addEventListener('click', function() {
       const resultado = document.getElementById('resultado');
       resultado.textContent = '¡Botón presionado!';
   });
   

Eventos de Input

El evento input se dispara cada vez que el valor de un campo de entrada cambia.

// Evento input
document.getElementById('input-change').addEventListener('input', function(e) {
    var valor = e.target.value;
    document.getElementById('resultado').textContent = 'Escribiste: ' + valor;
    console.log('Input cambió a:', valor);
});

El Objeto Event

La función manejadora recibe un objeto event (comúnmente llamado e o evt) con información sobre el evento:

input.addEventListener('input', function(e) {
    console.log('Tipo de evento:', e.type);          // 'input'
    console.log('Elemento que disparó:', e.target);  // El elemento input
    console.log('Valor actual:', e.target.value);     // El texto escrito
});

e.target siempre apunta al elemento que disparó el evento, independientemente de dónde esté adjunto el listener.

Eventos Focus y Blur

Estos eventos se disparan cuando un elemento gana o pierde el foco.

// Evento blur (cuando pierde el foco)
var inputBlur = document.getElementById('input-blur');
inputBlur.addEventListener('blur', function(e) {
    var valor = e.target.value;
    inputBlur.style.borderColor = 'red';
    inputBlur.style.borderWidth = '2px';
    document.getElementById('resultado').textContent = 'Perdió el foco. Valor: ' + valor;
    console.log('Input perdió el foco con valor:', valor);
});

// Evento focus (cuando recibe el foco)
inputBlur.addEventListener('focus', function() {
    inputBlur.style.borderColor = '';
    inputBlur.style.borderWidth = '';
    document.getElementById('resultado').textContent = 'Campo enfocado - escribe algo';
    console.log('Input recibió el foco');
});

Casos de Uso

Validación de Formularios

Usa blur para validar campos cuando el usuario termina de escribir.

emailInput.addEventListener('blur', function(e) {
    const email = e.target.value;
    if (!email.includes('@')) {
        e.target.style.borderColor = 'red';
        mostrarError('Email inválido');
    }
});

Indicadores Visuales

Usa focus para destacar el campo activo.

input.addEventListener('focus', function(e) {
    e.target.classList.add('activo');
    e.target.parentElement.classList.add('campo-activo');
});

Guardar Datos

Usa blur para guardar cambios automáticamente.

textarea.addEventListener('blur', function(e) {
    localStorage.setItem('borrador', e.target.value);
    console.log('Borrador guardado');
});

Tipos Comunes de Eventos

Eventos de Mouse

Click

elemento.addEventListener('click', function(e) {
    console.log('Click en:', e.clientX, e.clientY);
});

Double Click

elemento.addEventListener('dblclick', function() {
    console.log('Doble click');
});

Mouse Over / Out

elemento.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightblue';
});

elemento.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
});

Mouse Down / Up

elemento.addEventListener('mousedown', function() {
    console.log('Botón del mouse presionado');
});

elemento.addEventListener('mouseup', function() {
    console.log('Botón del mouse soltado');
});

Eventos de Teclado

// Detectar tecla presionada
input.addEventListener('keydown', function(e) {
    console.log('Tecla presionada:', e.key);
    
    // Detectar tecla Enter
    if (e.key === 'Enter') {
        console.log('¡Enter presionado!');
        e.preventDefault(); // Prevenir comportamiento por defecto
    }
});

// Detectar tecla soltada
input.addEventListener('keyup', function(e) {
    console.log('Tecla soltada:', e.key);
});

Eventos de Formulario

// Evento submit
formulario.addEventListener('submit', function(e) {
    e.preventDefault(); // Prevenir envío por defecto
    console.log('Formulario enviado');
    // Procesar datos del formulario
});

// Evento change (para selects, checkboxes, radios)
select.addEventListener('change', function(e) {
    console.log('Opción seleccionada:', e.target.value);
});

Siempre usa e.preventDefault() en eventos submit si vas a manejar el envío con JavaScript. De lo contrario, la página se recargará.

Inicialización de Eventos

Es importante esperar a que el DOM esté completamente cargado antes de agregar event listeners:

// INICIALIZACIÓN
document.addEventListener('DOMContentLoaded', function() {
    console.log('Clase de Manipulación del DOM iniciada');

    document.getElementById('btn-get-by-id').addEventListener('click', demoGetById);
    document.getElementById('btn-get-by-class').addEventListener('click', demoGetByClass);
    document.getElementById('btn-query-selector').addEventListener('click', demoQuerySelector);
    document.getElementById('btn-create').addEventListener('click', demoCreate);
    document.getElementById('btn-remove').addEventListener('click', demoRemove);

    configurarEventos();
});

Alternativas para Esperar el DOM

DOMContentLoaded

Se dispara cuando el HTML está completamente cargado y parseado.

document.addEventListener('DOMContentLoaded', function() {
    // Código aquí
});

defer en script

Agrega el atributo defer a tu etiqueta <script> en el HTML.

<script src="script.js" defer></script>

El script se ejecutará después de que el DOM esté listo.

Script al final del body

Coloca tu <script> al final del <body>.

<body>
    <!-- contenido HTML -->
    <script src="script.js"></script>
</body>

La opción más moderna y recomendada es usar el atributo defer en la etiqueta script.

Remover Event Listeners

Puedes remover un event listener cuando ya no lo necesites:

function handleClick() {
    console.log('Click');
}

// Agregar listener
boton.addEventListener('click', handleClick);

// Remover listener
boton.removeEventListener('click', handleClick);

Para remover un listener, debes pasar la misma función que usaste al agregarlo. Por eso es útil usar funciones con nombre en lugar de funciones anónimas.

Event Delegation

Cuando tienes muchos elementos similares, es más eficiente agregar un solo listener al padre:

// En lugar de esto (ineficiente)
const items = document.querySelectorAll('.item');
items.forEach(item => {
    item.addEventListener('click', handleClick);
});

// Haz esto (eficiente)
const lista = document.getElementById('lista');
lista.addEventListener('click', function(e) {
    // Verificar si el click fue en un item
    if (e.target.classList.contains('item')) {
        handleClick(e);
    }
});

Ventajas:

• Un solo listener en lugar de muchos
• Funciona automáticamente con elementos agregados dinámicamente
• Mejor rendimiento en listas grandes

Próximos Pasos

JavaScript Asíncrono

Aprende a manejar operaciones asíncronas

Ejemplos del DOM

Ve ejemplos completos de manipulación del DOM