Il metodo addEventListener () - Codice di esempio del listener di eventi JavaScript

Il metodo JavaScript addEventListener () consente di impostare le funzioni da chiamare quando si verifica un evento specificato, ad esempio quando un utente fa clic su un pulsante. Questo tutorial mostra come implementare addEventListener () nel codice.

Comprensione di eventi e gestori di eventi

Gli eventi sono azioni che si verificano quando l'utente o il browser manipola una pagina. Svolgono un ruolo importante in quanto possono causare la modifica dinamica degli elementi di una pagina web.

Ad esempio, quando il browser termina il caricamento di un documento, si loadè verificato un evento. Se un utente fa clic su un pulsante in una pagina, si clickè verificato un evento.

Molti eventi possono accadere una volta, più volte o mai. Potresti anche non sapere quando accadrà un evento, specialmente se è generato dall'utente.

In questi scenari, è necessario un gestore eventi per rilevare quando si verifica un evento. In questo modo, puoi impostare il codice per reagire agli eventi mentre si verificano al volo.

JavaScript fornisce un gestore di eventi sotto forma di addEventListener()metodo. Questo gestore può essere collegato a un elemento HTML specifico per il quale desideri monitorare gli eventi e l'elemento può avere più di un gestore collegato.

addEventListener () Sintassi

Ecco la sintassi:

target.addEventListener(event, function, useCapture) 
  • target : l'elemento HTML a cui desideri aggiungere il gestore di eventi. Questo elemento esiste come parte del Document Object Model (DOM) e potresti voler imparare a selezionare un elemento DOM.
  • evento : una stringa che specifica il nome dell'evento. Abbiamo già accennato loaded clickeventi. Per i curiosi, ecco un elenco completo degli eventi HTML DOM.
  • funzione : specifica la funzione da eseguire quando viene rilevato l'evento. Questa è la magia che può consentire alle tue pagine web di cambiare dinamicamente.
  • useCapture : un valore booleano opzionale (vero o falso) che specifica se l'evento deve essere eseguito nella fase di acquisizione o di bubbling. Nel caso di elementi HTML nidificati (come un imgall'interno di a div) con gestori di eventi allegati, questo valore determina quale evento viene eseguito per primo. Per impostazione predefinita, è impostato su false, il che significa che il gestore di eventi HTML più interno viene eseguito per primo (fase di bubbling).

addEventListener () Esempio di codice

Questo è un semplice esempio che ho fatto che ti mostra addEventListener()in azione.

Quando un utente fa clic sul pulsante, viene visualizzato un messaggio. Un altro clic del pulsante nasconde il messaggio. Ecco il JavaScript pertinente:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Seguendo la sintassi mostrata in precedenza per addEventListener():

  • target : elemento HTML conid='button'
  • funzione : funzione anonima (freccia) che imposta il codice necessario per rivelare / nascondere il messaggio
  • useCapture : lasciato al valore predefinito difalse

La mia funzione è in grado di rivelare / nascondere il messaggio aggiungendo / rimuovendo una classe CSS chiamata "reveal" che cambia la visibilità dell'elemento del messaggio.

Ovviamente nel tuo codice sentiti libero di personalizzare questa funzione. Puoi anche sostituire la funzione anonima con una tua funzione con nome.

Passaggio di eventi come parametro

A volte potremmo voler conoscere più informazioni sull'evento, come ad esempio quale elemento è stato cliccato. In questa situazione, dobbiamo passare un parametro di evento alla nostra funzione.

Questo esempio mostra come ottenere l'id dell'elemento:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Qui il parametro dell'evento è una variabile denominata ema può essere facilmente chiamata qualsiasi altra cosa come "evento". Questo parametro è un oggetto che contiene varie informazioni sull'evento come l'id di destinazione.

Non devi fare nulla di speciale e JavaScript sa automaticamente cosa fare quando passi un parametro in questo modo alla tua funzione.

Rimozione dei gestori di eventi

Se per qualche motivo non desideri più attivare un gestore di eventi, ecco come rimuoverlo:

target.removeEventListener(event, function, useCapture); 

I parametri sono gli stessi di addEventListener().

La pratica rende perfetti

Il modo migliore per migliorare con i gestori di eventi è esercitarsi con il proprio codice.

Ecco un esempio di progetto che ho realizzato in cui ho utilizzato i gestori di eventi per modificare il colore, le dimensioni e la velocità delle bolle che scorrono sullo sfondo di una pagina Web (sarà necessario fare clic sul pannello centrale per rivelare i controlli).

Divertiti e crea qualcosa di fantastico!

Per una conoscenza più approfondita dello sviluppo web per principianti, visita il mio blog su 1000 Mile World e seguimi su Twitter.