Come utilizzare i listener di eventi in JavaScript
La gestione degli eventi è vitale per le applicazioni interattive. Scopri come rispondere agli eventi del mouse e della tastiera utilizzando JavaScript.
Molte applicazioni web si affidano a qualche forma di evento per svolgere le proprie funzioni. Ad un certo punto, un essere umano interagisce con la sua interfaccia, che genera un evento. Questi eventi guidati dall'uomo si basano generalmente su un dispositivo periferico, come un mouse o una tastiera.
Quando un dispositivo crea un evento, il programma può ascoltarlo, per sapere quando eseguire un comportamento specifico. In questo tutorial imparerai come ascoltare gli eventi utilizzando JavaScript.
Che cos'è la programmazione guidata dagli eventi?
La programmazione guidata dagli eventi è il nome di un paradigma che si basa sull'esecuzione di un evento per svolgere le sue funzioni. È possibile creare un programma basato sugli eventi in qualsiasi linguaggio di programmazione di alto livello. Ma la programmazione basata sugli eventi è più comune in linguaggi come JavaScript che si integrano con un'interfaccia utente.
Cos'è un ascoltatore di eventi?
Un ascoltatore di eventi è una funzione che avvia un processo predefinito se si verifica un evento specifico. Pertanto, un ascoltatore di eventi "ascolta" un'azione, quindi chiama una funzione che esegue un'attività correlata. Questo evento può assumere una delle tante forme. Esempi comuni includono eventi del mouse, eventi della tastiera ed eventi della finestra.
Creazione di un listener di eventi utilizzando JavaScript
Puoi ascoltare gli eventi su qualsiasi elemento nel DOM. JavaScript ha una funzione addEventListener() che puoi chiamare su qualsiasi elemento di una pagina web. La funzione addEventListener() è un metodo dell'interfaccia EventTarget. Tutti gli oggetti che supportano gli eventi implementano questa interfaccia. Ciò include la finestra, il documento e i singoli elementi della pagina.
La funzione addEventListener() ha la seguente struttura di base:
element.addEventListener("event", functionToExecute);Dove :
- l'elemento può rappresentare qualsiasi tag HTML (da un pulsante a un paragrafo)
- l'“evento” è una stringa che nomina un'azione specifica e riconosciuta
- la functionToExecute è un riferimento a una funzione esistente
Creiamo la seguente pagina web che contiene alcuni elementi HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="home">
<h1 class="mainHeading">Welcome</h1>
<p>
Hello, welcome to my website.
</p>
<button class="btn" id="btn=1">Learn More</button>
</div>
<div id="about">
<h2 class=subheading>User Info</h2>
<label for="username">User Name: </label>
<input type="text" id="username">
<button class="btn" id="btn-2">Submit</button>
</div>
<script src="app.js"></script>
</body>
</html>Il codice HTML sopra crea una semplice pagina che si collega a un file JavaScript chiamato app.js. Il file app.js conterrà il codice per impostare i listener di eventi. Pertanto, se desideri avviare un processo specifico ogni volta che un utente fa clic sul primo pulsante nella pagina Web, questo è il file in cui crearlo.
Il file app.js
document.querySelector('.btn').addEventListener("click", clickDemo)
function clickDemo(){
console.log("Hi there")
}Il codice JavaScript riportato sopra accede al primo pulsante della pagina utilizzando la funzione querySelector(). Quindi aggiunge un ascoltatore di eventi a questo elemento utilizzando il metodo addEventListener(). L'evento specifico che ascolta ha il nome "clic". Quando il pulsante attiva l'evento, l'ascoltatore chiamerà la funzione clickDemo() .
La funzione clickDemo() stampa "Ciao" nella console del browser. Ogni volta che fai clic sul pulsante, dovresti vedere questo output nella tua console.
L'output dell'evento "clic".
Cosa sono gli eventi del mouse?
JavaScript dispone di un'interfaccia MouseEvent che rappresenta gli eventi che si verificano a causa dell'interazione di un utente con il mouse. Diversi eventi utilizzano l'interfaccia MouseEvent. Questi eventi includono quanto segue:
- clic
- doppio clic
- mousemove
- passaggio del mouse
- mouseout
- mouseup
- mouse premuto
L'evento clic si verifica quando un utente preme e rilascia un pulsante del mouse mentre il puntatore si trova su un elemento. Questo è esattamente ciò che è accaduto nell’esempio precedente. Come puoi vedere dall'elenco sopra, gli eventi del mouse possono assumere molte forme.
Un altro evento comune del mouse è dblclick, che sta per doppio clic. Si attiva quando un utente fa clic su un pulsante del mouse due volte in rapida successione. Una cosa notevole della funzione addEventListener() è che puoi usarla per assegnare più ascoltatori di eventi a un singolo elemento.
Aggiunta di un evento dblclick al primo pulsante
document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
alert("This is a demonstration of how to create a double-click event")
}L'aggiunta del codice riportato sopra al file app.js creerà effettivamente un secondo listener di eventi per il primo pulsante sulla pagina web. Pertanto, facendo clic due volte sul primo pulsante verrà creato il seguente avviso nel browser:
Nell'immagine sopra vedrai l'avviso generato e vedrai anche che altri due output "Ciao" sono nella console. Questo perché un evento doppio clic è una combinazione di due eventi clic e ci sono ascoltatori di eventi sia per gli eventi clic che per quelli dblclick .
I nomi degli altri eventi del mouse nell'elenco ne descrivono il comportamento. L'evento mousemove si verifica ogni volta che un utente sposta il mouse quando il cursore si trova su un elemento. L'evento mouseup si verifica quando un utente tiene premuto un pulsante su un elemento e poi lo rilascia.
Cosa sono gli eventi della tastiera?
JavaScript ha un'interfaccia KeyboardEvent. Questo ascolta le interazioni tra un utente e la sua tastiera. In passato, KeyboardEvent aveva tre tipi di eventi. Tuttavia, da allora JavaScript ha deprecato l'evento keypress.
Pertanto, gli eventi keyup e keydown sono gli unici due eventi da tastiera consigliati, che sono tutto ciò di cui hai bisogno. L'evento keydown si verifica quando un utente preme un tasto e l'evento keyup si verifica quando un utente lo rilascia.
Rivisitando l'esempio HTML sopra, il posto migliore per aggiungere un ascoltatore di eventi della tastiera è sull'elemento input.
Aggiunta di un listener di eventi della tastiera al file app.js
let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput(e){
greetings.innerText = (`Hello ${e.target.value}, welcome to my website.`)
}Il codice precedente utilizza la funzione querySelector() per accedere al paragrafo e agli elementi input sulla pagina. Quindi chiama il metodo addEventListener() sull'elemento input, che ascolta l'evento keyup. Ogni volta che si verifica un evento keyup, la funzione captureInput() prende il valore della chiave e lo aggiunge al paragrafo sulla pagina. Il parametro e rappresenta l'evento, che JavaScript assegna automaticamente. Questo oggetto evento ha una proprietà, target, che è un riferimento all'elemento con cui l'utente ha interagito.
In questo esempio, l'etichetta allegata al campo input richiede un nome utente. Se digiti il tuo nome nel campo di input , la pagina web avrà un aspetto simile a questo:
Il paragrafo ora contiene il valore di input che, nell'esempio sopra, è "Jane Doe".
addEventListener cattura tutti i tipi di interazione dell'utente
Questo articolo ti ha presentato il metodo addEventListener(), nonché diversi eventi del mouse e della tastiera che puoi utilizzare con esso. A questo punto, sai come ascoltare un particolare evento e come creare una funzione che risponda ad esso.
Tuttavia, addEventListener fornisce funzionalità aggiuntive tramite il suo terzo parametro. Puoi usarlo per controllare la propagazione degli eventi: l'ordine in cui gli eventi si spostano dagli elementi ai loro genitori o figli.