El método addEventListener es la piedra angular en la forma de manejar eventos en JavaScript. Este poderoso método permite agregar disparadores de eventos a cualquier elemento DOM, creando conexiones entre las acciones del usuario y respuesta de la aplicación. La sintaxis es simple y elegante lo cual permite manejar escenarios complejos.

Ejemplo de addEventListener en un botón con ID "myButton"

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('El botón recibió un click');
});

Cuando un evento ocurre Javascript no solo notifica al event listener que algo ha ocurrido, sino también provee de información adicional sobre el evento del objeto. Este objeto es pasado como el primer parámetro al manejador de eventos y contiene mucha información acerca del evento que ha ocurrido.

button.addEventListener('click', function(event) {
    console.log('Tipo de evento:', event.type);
    console.log('Elemento objetivo:', event.target);
    console.log('Coordenadas del mouse:', event.clientX, event.clientY);
    console.log('Tecla Ctrl presionada:', event.ctrlKey);
    console.log('Tiempo:', event.timeStamp);
});

Con esta información podemos tomar decisiones acerca del comportamiento de nuestra aplicación, ya sea mediante la aparición de un menú contextual, del ocultamiento de algún elemento o la aparición de algún otro.

Tipos de eventos

No solo contamos con el evento click para disparar funciones. También tenemos mouseover o mouseout para crear efectos cuando el cursos del mouse posicione encima de algún elemento. Mousedown y mouseup proveen control adecuado sobre elementos que pueden ser arrastrados y soltados en coordenadas diferentes dentro de la página de nuestra aplicación web.

Efecto mouseover

const hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
    this.style.backgroundColor = '#e0e0e0';
});

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

El código anterior modifica el color de fondo del elemento al posicionarse o salirse de su área.

No todo es le mouse. addEventListener también puede asignarse a eventos del teclado y responder a la presión de una tecla específica. Por ejemplo, podemos bloquear el diálogo "Salvar" del navegador mediante la siguiente función:

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); //Previene el diálogo del navegador.
        saveDocument();
    }
});

Ya hemos abarcado anteriormente cómo validar formularios con JavaScript.

En el ejemplo siguiente validamos una dirección de email:

const emailInput = document.getElementById('email');

emailInput.addEventListener('input', function() {
    const email = this.value;
    const isValid = validateEmail(email);

    if (isValid) {
        this.classList.remove('invalid');
        this.classList.add('valid');
    } else {
        this.classList.remove('valid');
        this.classList.add('invalid');
    }
});

En el siguiente artículo hablaremos de la propiedad Target para distinguir al elemento cuando un grupo de ellos comparten el mismo manejador de eventos.

No olvides compartir este artículo :)