Eventos en JavaScript: addEventListener y removeEventListener

Los eventos son acciones que puede desencadenar el usuario: un clic en un botón, escribir texto en un formulario, etc. En JavaScript usamos los gestores de eventos para ejecutar código como respuesta a esos eventos.

Eventos habituales en JavaScript

Hay muchos eventos de uso frecuente en JavaScript. Estos son algunos ejemplos:

• click: se dispara cuando el usuario hace clic en un elemento
• mouseover: se dispara cuando el usuario pasa el ratón por encima de un elemento
• submit: se dispara cuando el usuario envía un formulario
• focus: se dispara cuando el usuario pone el foco en un elemento (por ejemplo al hacer clic en un campo de formulario)

Hay muchos otros eventos que pueden dispararse durante la interacción del usuario, como «change», «keyup», «keydown», etc. Puedes encontrar una lista más completa de eventos aquí: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Añadir un gestor de eventos a un elemento

Hay varias maneras de añadir un gestor de eventos a un elemento del DOM. La primera consiste en usar la propiedad del elemento en cuestión. Por ejemplo, para añadir un gestor de clic a un botón:

const button = document.querySelector('button');
button.onclick = function() {
    console.log('Bouton cliqué');
}

También se puede usar el método addEventListener, que permite añadir varios gestores de eventos a un mismo elemento:

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focus');
});
input.addEventListener('blur', function() {
    console.log('Input blur');
});

Y también el método removeEventListener para quitar un gestor de eventos de un elemento:

// nuestra función anónima
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// Añadimos nuestro evento
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Más adelante en el código, quitamos este evento por X o Y motivos
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

En este ejemplo, el gestor de eventos «click» asociado a la función «maFonctionAnonyme» se retira del botón.

Conclusión

Usando los eventos y los gestores de eventos, puede crear interacciones en tiempo real con su sitio web y hacerlo más dinámico y agradable para los usuarios. El próximo capítulo presenta los módulos y las importaciones/exportaciones (ES6), que dividen el código en archivos, las clases, por su parte, se detallan en el artículo sobre las clases en JavaScript.