Molte applicazioni web si affidano a una 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 in genere si basano 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 usando JavaScript.

Che cos'è la programmazione basata sugli 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 su 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.

Che cos'è un listener di eventi?

Un listener di eventi è una funzione che avvia un processo predefinito se si verifica un evento specifico. Quindi, un listener di eventi "ascolta" un'azione, quindi chiama una funzione che esegue un'attività correlata. Questo evento può assumere una delle molte 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 un addEventListener() funzione che puoi chiamare su qualsiasi elemento di una pagina web. Il addEventListener() la funzione è un metodo di Destinazione evento interfaccia. 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("evento", functionToExecute);

Dove:

• il elemento può rappresentare qualsiasi tag HTML (da un pulsante a un paragrafo)
• il "evento" è una stringa che nomina un'azione specifica e riconosciuta
• il funzione da eseguire è un riferimento a una funzione esistente

Creiamo la seguente pagina web che ha alcuni elementi HTML:

Ben arrivato


 Ciao, benvenuto nel mio sito web.


Per saperne di più





Informazioni sull'utente

Nome utente: 

Invia

Il codice HTML sopra crea una semplice pagina che si collega a un file JavaScript chiamato app.js. Il app.js file conterrà il codice per impostare i listener di eventi. Quindi, se desideri avviare un processo specifico ogni volta che un utente fa clic sul primo pulsante della pagina Web, questo è il file in cui crearlo.

Il file app.js

document.querySelector('.btn').addEventListener("clic", clicDemo)
funzione clickDemo(){
 console.log("Ciao")
}

Il codice JavaScript di cui sopra accede al primo pulsante della pagina utilizzando il querySelector() funzione. Quindi aggiunge un listener di eventi a questo elemento utilizzando il file addEventListener() metodo. L'evento specifico che ascolta ha il nome "click". Quando il pulsante attiva quell'evento, l'ascoltatore chiamerà il fare clic su Demo() funzione.

Imparentato: Scopri come utilizzare i selettori DOM

Il fare clic su Demo() la funzione stampa "Ciao" sulla 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 ha un MouseEvent interfaccia che rappresenta gli eventi che si verificano a causa dell'interazione di un utente con il mouse. Diversi eventi utilizzano il MouseEvent interfaccia. Questi eventi includono quanto segue:

• clic
• dblclic
• mossa del mouse
• passaggio del mouse
• uscita del mouse
• alza il mouse
• verso il basso

Il clic L'evento 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 è dblclic, che sta per doppio clic. Questo si attiva quando un utente fa clic su un pulsante del mouse due volte in rapida successione. Una cosa notevole circa il addEventListener() la funzione è che puoi usarlo per assegnare più listener di eventi a un singolo elemento.

Aggiunta di un evento dblclick al primo pulsante

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
funzione dblclickDemo(){
 alert("Questa è una dimostrazione di come creare un evento di doppio clic")
}

L'aggiunta del codice sopra al file app.js creerà effettivamente un secondo listener di eventi per il primo pulsante nella pagina Web. Quindi, facendo clic due volte sul primo pulsante verrà creato il seguente avviso nel browser:

Nell'immagine sopra vedrai l'avviso che viene generato e vedrai anche che altri due output "Ciao" sono nella console. Questo perché un evento di doppio clic è una combinazione di due eventi di clic e sono presenti listener di eventi per entrambi clic e il dblclic eventi.

I nomi degli altri eventi del mouse nell'elenco descrivono il loro comportamento. Il mossa del mouse l'evento si verifica ogni volta che un utente sposta il mouse quando il cursore si trova su un elemento. Il alza il mouse L'evento si verifica quando un utente tiene premuto un pulsante su un elemento, quindi lo rilascia.

Cosa sono gli eventi della tastiera?

JavaScript ha un KeyboardEvent interfaccia. Questo ascolta le interazioni tra un utente e la sua tastiera. Nel passato, KeyboardEvent aveva tre tipi di eventi. Tuttavia, JavaScript da allora ha deprecato il pressione dei tasti evento.

Così il chiave e keydown gli eventi sono gli unici due eventi della tastiera consigliati, che sono tutto ciò di cui hai bisogno. Il keydown l'evento si verifica quando un utente preme un tasto e il chiave l'evento si verifica quando un utente lo rilascia.

Rivisitando l'esempio HTML sopra, il posto migliore per aggiungere un listener di eventi della tastiera è su ingresso elemento.

Aggiunta di un listener di eventi della tastiera al file app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
funzione catturaInput (e){
 greetings.innerText = (`Ciao ${e.target.value}, benvenuto nel mio sito web.`)
}

Il codice sopra usa il querySelector() funzione per accedere al paragrafo e ingresso elementi sulla pagina. Quindi chiama il addEventListener() metodo sul ingresso elemento, che ascolta il chiave evento. Ogni volta che un chiave evento si verifica, il catturaInput() La funzione prende il valore della chiave e lo aggiunge al paragrafo nella pagina. Il e parametro 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 file ingresso campo richiede un nome utente. Se digiti il ​​tuo nome nel campo di immissione, la pagina web sarà simile a questa:

Il paragrafo contiene ora il valore di input che, nell'esempio sopra, è "Jane Doe".

addEventListener acquisisce tutti i tipi di interazione dell'utente

Questo articolo ti ha presentato il addEventListener() metodo, oltre a 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.

Il addEventListener fornisce capacità extra, tuttavia, 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.

Comprendere la propagazione degli eventi in JavaScript

Gli eventi sono una potente funzionalità JavaScript. Capire come un browser web li solleva contro gli elementi è la chiave per padroneggiarne l'uso.

Leggi Avanti

Circa l'autore