Associare gestori di eventi agli elementi in JavaScript

Ora impariamo a far reagire i nostri elementi DOM alle azioni dell'utente del sito. Ad esempio, l'utente clicca da qualche parte con il mouse, e il nostro codice in risposta deve elaborare questo click e visualizzare alcune informazioni sullo schermo.

Le azioni dell'utente che possiamo tracciare tramite JavaScript sono chiamate eventi. Gli eventi possono essere i seguenti: click del mouse su un elemento della pagina, passaggio del mouse su un elemento della pagina o viceversa - l'uscita del cursore dal elemento e così via. Inoltre, ci sono eventi che non dipendono dalle azioni dell'utente, ad esempio, l'evento del caricamento della pagina HTML nel browser.

Facciamo un esempio creando un pulsante, al click del quale verrà visualizzato del testo sullo schermo. Per iniziare, creiamo il codice HTML del pulsante:

<input id="button" type="submit">

Ora otteniamo un riferimento al pulsante in una variabile:

let button = document.querySelector('#button');

Ora dobbiamo definire la reazione del nostro pulsante al click su di esso. Per questo in JavaScript esiste un metodo speciale addEventListener, che accetta come primo parametro il nome dell'evento (il click sul pulsante ha il nome 'click'), e come secondo parametro - una funzione di callback, che viene eseguita quando si verifica quell'evento.

Ad esempio, al click sul pulsante visualizziamo del testo:

button.addEventListener('click', function() {
	console.log('!!!');
});

Ci sono 3 pulsanti:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Fate in modo che al click sul primo pulsante venga visualizzato il numero 1, al click sul secondo - il numero 2, e al click sul terzo - il numero 3.