Glossario: Listener JavaScript

In questa guida andremo ad approfondire una componente molto importante dei nostri siti web, i Listener JavaScript.

COS’É UN LISTENER JAVASCRIPT?

Un Listener o Event Listener è metodo JavaScript che sta letteralmente per “ascoltatore di eventi”.

In pratica questo Listener rimane in attesa del verificarsi di un determinato evento, come per esempio l’utente che fa un click, oppure sposta il mouse o preme un tasto sulla tastiera, eccetera.

Una volta che il Listener ha captato che l’evento è stato scatenato reagisce e fa scattare un altro evento oppure chiama una funzione.

Vediamo come è composto un listener JavaScript:

 

element.addEventListener(event, listener, useCapture);

 

event = l’evento per cui il listener rimane in ascolto, può essere qualsiasi evento JavaScript valido come click, hover eccetera.

Ecco la lista completa su W3Scholl.

listener = detto anche handler può essere la funzione che risponde al verificarsi dell’evento.

useCapture = viene utilizzato un valore booleano per controllare la propagazione degli eventi, questo parametro è facoltativo.

A COSA SERVONO I LISTENER JAVASCRIPT?

Se mi segui da tempo, probabilmente conosci già questa metafora che tra l’altro è presente nel libro “Google Tag Manager per chi inizia”, ma credo sia perfetta anche in questo caso specifico.

Immagina al sito web come alla casa del “Grande Fratello“, con molte stanze e diverse persone che ci girano all’interno. Per monitorare il comportamento e le azioni che le persona eseguono all’interno della casa possiamo utilizzare dei sensori che si accendono in determinate condizioni.

Per esempio, possiamo mettere un sensore alla porta della cucina, che si accende quando qualcuno apre la porta ed entra in cucina, oppure possiamo mettere un sensore all’interruttore della luce in bagno e così via.

Ecco questi sono tutti ottimi esempi di Listener JavaScript, che stanno in costante ascolto del verificarsi di un evento e si accendono quando l’evento si verifica.

Ma non solo, grazie ai Listener possiamo anche eseguire un azione quando l’evento si verifica.

Tornando alla metafora della casa del Grande Fratello, oltre al monitorare quando una persona apre la porta ed entra in cucina, possiamo fare in modo che per esempio si accenda anche la telecamera e inizi a registrare quello che avviene all’interno della stanza.

In gergo tecnico questo procedimento si chiama “handler”, ovvero la funzione che viene eseguita quando l’evento per cui il Listener è in ascolto si verifica.

PS: gli attivatori (trigger) in Google Tag Manager sono in effetti dei Listener JavaScript 😉

Tutto chiaro? Se hai dubbi, scrivimi nei commenti, sarò felice di aiutarti 🙂