Eventi e gestori di eventi in JavaScript con addEventListener

Gli eventi sono azioni che l’utente può scatenare: il clic su un pulsante, la digitazione di testo in un modulo e così via. In JavaScript si usano i gestori di eventi per eseguire del codice in risposta a questi eventi.

Gli eventi più comuni in JavaScript

In JavaScript esistono molti eventi di uso frequente. Qualche esempio:

• click: scatenato quando l’utente clicca su un elemento
• mouseover: scatenato quando l’utente passa il mouse su un elemento
• submit: scatenato quando l’utente invia un modulo
• focus: scatenato quando l’utente porta il focus su un elemento (per esempio cliccando in un campo di un modulo)

Ci sono molti altri eventi che l’interazione dell’utente può scatenare, come «change», «keyup», «keydown» e altri ancora. Un elenco più completo degli eventi lo trovi qui: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Aggiungere un gestore di eventi a un elemento

Ci sono diversi modi per aggiungere un gestore di eventi a un elemento del DOM. Il primo consiste nell’usare la proprietà dell’elemento stesso. Per esempio, per aggiungere un gestore del clic a un pulsante:

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

Si può anche usare il metodo addEventListener, che permette di aggiungere più gestori di eventi a uno stesso elemento:

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

Allo stesso modo, il metodo removeEventListener toglie un gestore di eventi da un elemento:

// la nostra funzione anonima
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// Aggiungiamo il nostro evento
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Più avanti nel codice rimuoviamo questo evento per un motivo o per l'altro
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

In questo esempio il gestore di eventi «click» associato alla funzione «maFonctionAnonyme» viene rimosso dal pulsante.

Conclusione

Usando gli eventi e i gestori di eventi, potete creare interazioni in tempo reale con il vostro sito web e renderlo più dinamico e piacevole per gli utenti. Il prossimo capitolo presenta i moduli e le importazioni/esportazioni (ES6), che suddividono il codice in file, le classi, invece, sono descritte nell’articolo su le classi in JavaScript.