Introduzione agli eventi e agli event listener

Cosa sono gli eventi in JavaScript?

JavaScript offre meccanismi per gestire questi eventi ed eseguire codice specifico in risposta, rendendo l'applicazione web interattiva e dinamica.

Tipi di eventi comuni

Spiegazione di addEventListener() e come associare i listener di eventi

Per rispondere agli eventi in JavaScript, si associa un listener di eventi a un elemento. Il metodo più comune per farlo è la funzione addEventListener(), che ascolta eventi specifici e richiama una funzione quando l'evento si verifica.

element.addEventListener('event', function, useCapture);

• event: Il tipo di evento da ascoltare (ad esempio, 'click', 'submit');
• function: La funzione di callback da eseguire quando l'evento viene attivato;
• useCapture (opzionale): Booleano che indica se l'evento deve essere catturato durante la fase di capturing o bubbling (il valore predefinito è false, quindi ascolta durante la fase di bubbling).

Listener per l'evento click

Associazione di un listener per l'evento click al pulsante. Al clic, viene attivato un alert.

Il listener dell'evento è associato all'elemento #myButton e, quando l'utente fa clic sul pulsante, viene visualizzata una finestra di messaggio con il testo "Button clicked!"

Listener per l'evento Submit

Aggiunta di un listener per l'evento submit, impedendo il comportamento predefinito di invio del modulo per gestire i dati con JavaScript.

Un event listener sull'evento submit del form impedisce l'invio predefinito con event.preventDefault(), consentendo al JavaScript personalizzato di gestire i dati. Al momento dell'invio, il nome inserito viene recuperato e visualizzato in un paragrafo con l'ID displayName.

Evento Keypress

Colleghiamo un event listener keypress al campo di input. Quando viene premuto un tasto, esso verrà mostrato nel paragrafo.

Ogni volta che viene premuto un tasto durante la digitazione nel campo di input, il tasto premuto viene registrato nella console.

Esempio pratico: Gestione della validazione del modulo al momento dell'invio

Creazione di una logica per la validazione del modulo prima dell'invio.

Il listener dell'evento submit garantisce che il modulo non venga inviato se i campi obbligatori sono vuoti. Se il campo username o password è vuoto, l'evento viene bloccato e viene visualizzato un messaggio di errore.