Cos'è un event listener?
Un event listener è una funzione in JavaScript che attende il verificarsi di un evento e quindi risponde. JavaScript è un linguaggio di programmazione che gli sviluppatori utilizzano per realizzare pagine Web interattive. La funzione event listener di JavaScript consente di creare risposte personalizzate a eventi come clic del mouse, clic della tastiera e ridimensionamento delle finestre. Il paradigma di programmazione dell'attesa e della risposta agli eventi in tempo reale si chiama gestione degli eventi.
Qual è la sintassi della funzione event listener?
La funzione event listener condivide caratteristiche simili ad altre funzioni JavaScript. Una volta attivata, intraprende le azioni necessarie per elaborare l'evento. Ad esempio, la funzione event listener può modificare il testo visualizzato, raccogliere informazioni dai moduli di registrazione o archiviare dati nei database.
Sintassi dell'ascoltatore di eventi
Una funzione event listener segue la sintassi JavaScript corretta, come in questo prossimo esempio.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
Questo esempio mostra la funzione event listener RespondMouseClick. È comune scrivere il nome della funzione in modo che rifletta lo scopo dell'ascoltatore di eventi. Nella funzione, si scrivono codici per eseguire azioni specifiche quando si verifica l'evento. In questo esempio, la funzione aggiunge il testo MouseClick accaduto all'elemento HTML textdisplay1.
Sintassi del gestore eventi
In alternativa, è possibile utilizzare una funzione del gestore eventi per rispondere all'evento attivato, come nell'esempio seguente.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Ciò consente di gestire diversi tipi di eventi da un elemento specifico con un'unica funzione.
Ad esempio, è possibile registrare un ascoltatore di eventi per gestire tutti i tipi di eventi blockchain su applicazioni basate su eventi. Per ulteriori informazioni, leggi come creare un'applicazione basata su eventi con Blockchain gestita da Amazon.
Come si aggiunge un ascoltatore di eventi?
Un ascoltatore di eventi viene attivato solo dopo averlo aggiunto al rispettivo elemento JavaScript. Per farlo, puoi usare una sintassi come questa:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Ad esempio, gli sviluppatori possono richiamare la seguente funzione per associare l'ascoltatore di eventi clic a un elemento button.
btn.addEventListener("click", RespondMouseClick);
È inoltre possibile aggiungere più ascoltatori di eventi a uno specifico oggetto evento senza sovrascrivere i gestori di eventi esistenti.
Ad esempio, Amazon Web Services (AWS) consente agli sviluppatori di concatenare più richiamate sull'oggetto AWS.Request. Per ulteriori informazioni, leggi come utilizzare un ascoltatore di eventi di oggetti di richiesta su AWS.
Parametri per l'aggiunta di eventi
Ecco una spiegazione dei parametri della sintassi precedente:
- Il parametro event è qualsiasi evento JavaScript valido, ad esempio un clic, una modifica, il passaggio del mouse, il tasto giù e il caricamento.
- Il parametro listener è la richiamata dell'evento o la funzione JavaScript creata per rispondere a eventi specifici.
- Il parametro useCapture è un parametro facoltativo che indica la modalità di propagazione degli eventi. Accetta valori booleani, dove true attiva l'acquisizione mentre false attiva il bubbling. Il valore predefinito di questo parametro è false.
- Il parametro options è costituito da diversi valori opzionali, tra cui la modalità di acquisizione e i segnali di rifiuto, che rappresentano i comportamenti dell'ascoltatore.
Come si rimuove un ascoltatore di eventi?
Gli ascoltatori di eventi rimangono attivi finché non vengono rimossi dagli elementi JavaScript associati. A tale scopo, è possibile utilizzare la sintassi seguente.
element.removeEventListener(type, listener, useCapture);
I parametri di rimozione degli ascoltatori di eventi sono simili a quelli utilizzati per aggiungerli. Quando si rimuove un ascoltatore di eventi, è necessario specificare gli stessi parametri type, listener e useCapture. In caso contrario, l'ascoltatore rimarrà attivo e continuerà a attivarsi per eventi futuri.
Ad esempio, puoi aggiungere un evento con il seguente codice.
button.addEventListener("click", RespondMouseClick, true);
Tuttavia, l'applicazione del codice seguente non riesce a rimuovere l'ascoltatore di eventi. Questo perché il valore di useCapture è diverso da quello registrato con l'oggetto button.
button.removeEventListener("click", RespondMouseClick, false);
Per rimuovere correttamente l'evento e impedirne l'attivazione, puoi utilizzare il codice seguente.
button.removeEventListener("click", RespondMouseClick, true);
Come operano le funzioni dell'ascoltatore di eventi annidato?
Gli ascoltatori di eventi annidati sono gestori di eventi aggiunti agli elementi HTML a diversi livelli gerarchici.
Nel seguente esempio HTML, il documento possiede l'elemento principale sottostante, mentre il genitore possiede il figlio.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Le applicazioni Web complesse potrebbero avere più livelli padre-figlio con le rispettive funzioni di ascoltatori di eventi. Quando si verifica un particolare evento, attiva gli ascoltatori di eventi su diversi livelli in un ordine particolare. Ad esempio, facendo clic su un pulsante secondario, l'evento verrà propagato a tutti i gestori che catturano un clic del mouse.
Gli eventi possono propagarsi in due modalità: bubbling e acquisizione.
Bubbling di eventi
Il bubbling è la modalità predefinita di gestione degli eventi JavaScript. Questo processo propaga l'evento dallo strato più interno a quello più esterno.
Ad esempio, un utente può passare il mouse su una casella di testo nella sezione figlio. Quindi, l'applicazione potrebbe passare l'evento nel seguente ordine:
- L'ascoltatore di eventi dell'elemento figlio gestisce l'evento al passaggio del mouse.
- Quindi, l'ascoltatore di eventi principale elabora l'evento e passa il controllo all'ascoltatore di eventi del documento.
Per configurare il bubbling di eventi, usa la seguente sintassi:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Acquisizione di eventi
L'acquisizione di eventi è una speciale modalità di gestione degli eventi in JavaScript in cui l'evento si propaga verso l'interno dal livello più esterno. Una volta che l'evento raggiunge l'elemento bersaglio nel livello interno, la modalità di gestione degli eventi passa al bubbling. Quindi, il bubbling propaga l'evento verso l'esterno fino allo livello più alto.
Ad esempio, un utente può fare clic sul pulsante di un elemento figlio e avviare la seguente sequenza:
- L'ascoltatore di eventi del documento elabora l'evento relativo al clic del mouse, seguito dal gestore eventi principale.
- L'evento raggiunge l'elemento di destinazione, che è il pulsante. L'ascoltatore di eventi del pulsante elabora l'evento.
- La gestione degli eventi passa dalla modalità di acquisizione alla modalità bubbling.
- Lo stesso evento di clic del mouse attiva il gestore eventi sull'elemento padre prima di terminare sul documento.
Come scegliere tra il bubbling e l'acquisizione
Il bubbling e l'acquisizione consentono di gestire gli eventi in modo diverso. Il bubbling viene usato raramente poiché l'acquisizione è sufficiente per gestire la maggior parte degli eventi nelle applicazioni.
Quando si deve scegliere tra bubbling e acquisizione, va considerato il flusso di propagazione degli eventi e il modo in cui si allinea alla logica di programmazione dell'applicazione.
Ad esempio, si consideri un modulo principale composto da due elementi secondari. Il primo elemento richiede un aggiornamento immediato quando si verifica un evento nel secondo elemento. In questo caso, è necessario utilizzare la modalità di acquisizione. Essa infatti assicura che l'ascoltatore di eventi principale elabori l'evento e aggiorni il primo elemento. Quindi, passa il controllo all'ascoltatore di eventi nel secondo elemento figlio.
Come si interrompe la propagazione degli eventi nelle funzioni degli ascoltatori di eventi annidati?
Gli eventi si propagano fino a raggiungere la destinazione finale in una disposizione di ascoltatori annidati. È necessario utilizzare metodi specifici per impedire all'evento di propagarsi ulteriormente.
Il seguente metodo interrompe l'evento nell'ascoltatore dell'evento.
event.stopPropagation();
Ad esempio, se richiami StopPropagation con il pulsante secondario, l'evento del clic del mouse non si propagherà ai livelli principale e di documento. Pertanto, gli ascoltatori di eventi di livello superiore non verranno attivati.
Interrompi la propagazione di tutti gli eventi
StopPropagation interrompe solo la propagazione del tipo di evento corrente. Se l'oggetto ha diversi tipi di ascoltatori di eventi registrati, questi si attivano comunque nonostante la chiamata a StopPropagation.
Per interrompere tutti gli eventi correlati a un oggetto specifico, è possibile utilizzare il metodo StopImmediatePropagation , come segue.
event.stopImmediatePropagation();
Quando un ascoltatore di eventi chiama StopImmediatePropagation, non viene attivato alcun altro ascoltatore di eventi associato all'oggetto.
In che modo AWS può supportare i tuoi requisiti JavaScript?
Amazon Web Services (AWS) offre un SDK AWS per JavaScript in modo da poter utilizzare facilmente i servizi nelle applicazioni con librerie e API.
Puoi utilizzare l'SDK per sviluppare applicazioni Web e Web per dispositivi mobili lato server. L'SDK supporta il runtime JavaScript, Node.JS e React Native, oltre al cross-runtime. Ciò consente agli sviluppatori di eseguire lo stesso pacchetto di servizi client su piattaforme diverse.
Ecco altri vantaggi dell'utilizzo dell'SDK:
- L'SDK è scritto in TypeScript. Ciò offre vantaggi come il controllo statico dei tipi e il supporto di classi e moduli.
- L'SDK offre uno stack middleware che consente di introdurre operazioni personalizzate.
- L'SDK ha un'architettura modulare. Ciò consente di utilizzare solo i pacchetti necessari per ottimizzare le prestazioni delle applicazioni.
Inizia a usare le applicazioni JavaScript registrando un account AWS oggi stesso.
Fasi successive su AWS
Ottieni accesso istantaneo al Piano gratuito di AWS.
