Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Introduzione agli Eventi e agli Event Listener | Gestione degli Eventi e Interazioni Utente in JavaScript
Padronanza Avanzata di JavaScript

bookIntroduzione agli Eventi e agli Event Listener

Cosa sono gli eventi in JavaScript?

JavaScript fornisce 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 Collegare i Listener di Eventi

Per rispondere agli eventi in JavaScript, si collega un event listener a un elemento. Il metodo più comune per farlo è la funzione addEventListener(), che ascolta eventi specifici ed esegue 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 cattura o di bubbling (il valore predefinito è false, quindi ascolta durante la fase di bubbling).

Listener per l'Evento Click

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

Il listener di eventi è 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 tramite JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Un event listener sull'evento submit del form impedisce l'invio predefinito tramite event.preventDefault(), consentendo la gestione personalizzata dei dati tramite JavaScript. Al momento dell'invio, il nome inserito viene recuperato e visualizzato in un paragrafo con l'ID displayName.

Evento Keypress

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

Ogni volta che si preme 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

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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

1. Qual è lo scopo di addEventListener()?

2. Quale dei seguenti NON è un tipo di evento valido per addEventListener()?

question mark

Qual è lo scopo di addEventListener()?

Select the correct answer

question mark

Quale dei seguenti NON è un tipo di evento valido per addEventListener()?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

What are some other common event types in JavaScript?

Can you explain how event propagation works?

How do I remove an event listener in JavaScript?

Awesome!

Completion rate improved to 2.22

bookIntroduzione agli Eventi e agli Event Listener

Scorri per mostrare il menu

Cosa sono gli eventi in JavaScript?

JavaScript fornisce 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 Collegare i Listener di Eventi

Per rispondere agli eventi in JavaScript, si collega un event listener a un elemento. Il metodo più comune per farlo è la funzione addEventListener(), che ascolta eventi specifici ed esegue 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 cattura o di bubbling (il valore predefinito è false, quindi ascolta durante la fase di bubbling).

Listener per l'Evento Click

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

Il listener di eventi è 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 tramite JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Un event listener sull'evento submit del form impedisce l'invio predefinito tramite event.preventDefault(), consentendo la gestione personalizzata dei dati tramite JavaScript. Al momento dell'invio, il nome inserito viene recuperato e visualizzato in un paragrafo con l'ID displayName.

Evento Keypress

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

Ogni volta che si preme 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

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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

1. Qual è lo scopo di addEventListener()?

2. Quale dei seguenti NON è un tipo di evento valido per addEventListener()?

question mark

Qual è lo scopo di addEventListener()?

Select the correct answer

question mark

Quale dei seguenti NON è un tipo di evento valido per addEventListener()?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1
some-alt