Comprensione dell'Oggetto Evento in JavaScript
Ogni volta che si verifica un evento in JavaScript, un oggetto event viene automaticamente passato al gestore dell'evento. Questo oggetto contiene informazioni importanti sull'evento, come l'elemento che lo ha generato (target), il tipo di evento (type) e metodi per controllare il comportamento dell'evento, come preventDefault() e stopPropagation().
Accesso alle informazioni relative all'evento
L'oggetto event contiene diverse proprietà e metodi utili che consentono di accedere alle informazioni sull'evento e di interagire con esso.
target
La proprietà target si riferisce all'elemento che ha generato l'evento. Aiuta a determinare quale elemento è stato cliccato, passato sopra con il mouse o con cui si è interagito.
index.html
index.css
index.js
event.target viene utilizzato per identificare il pulsante specifico che è stato cliccato e il suo id viene visualizzato nel paragrafo con l'ID display.
type
La proprietà type fornisce il tipo di evento che si è verificato (ad esempio, click, submit, keydown).
index.html
index.css
index.js
Il event.type viene visualizzato nel paragrafo come feedback, mostrando che si è verificato un evento click. Inoltre, quando si fa clic sul pulsante, il colore di sfondo dell'intero body viene cambiato in lightblue.
Metodo preventDefault() nell'oggetto Event
Il metodo preventDefault() interrompe il comportamento predefinito di un elemento, come ad esempio impedire a un link di navigare o evitare l'invio di un modulo.
index.html
index.css
index.js
Qui, preventDefault() impedisce l'azione predefinita (navigazione verso una nuova pagina) quando si clicca sul link. Invece, viene visualizzato un avviso.
Esempio pratico: Gestione dell'invio di un modulo e utilizzo dell'oggetto evento
Validazione di un modulo, prevenzione dell'invio se i campi sono vuoti e visualizzazione dei dati del modulo insieme alle informazioni relative all'evento come target, type e come preventDefault() impedisce l'invio predefinito del modulo.
index.html
index.css
index.js
Quando il modulo "Sign Up" viene inviato, un event listener intercetta l'invio con event.preventDefault(). Se uno dei campi username o password è vuoto, viene visualizzato un messaggio di errore; altrimenti, appare un messaggio di successo che mostra l'username inviato. Inoltre, i dettagli sull'evento—come tipo, ID del modulo e se l'azione predefinita è stata impedita—sono mostrati in una sezione dedicata. Il modulo viene poi reimpostato per un ulteriore utilizzo.
1. Quali informazioni fornisce la proprietà event.target?
2. Perché potresti utilizzare event.preventDefault() in un evento di invio di un modulo?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.22Comprensione dell'Oggetto Evento in JavaScript
Scorri per mostrare il menu
Ogni volta che si verifica un evento in JavaScript, un oggetto event viene automaticamente passato al gestore dell'evento. Questo oggetto contiene informazioni importanti sull'evento, come l'elemento che lo ha generato (target), il tipo di evento (type) e metodi per controllare il comportamento dell'evento, come preventDefault() e stopPropagation().
Accesso alle informazioni relative all'evento
L'oggetto event contiene diverse proprietà e metodi utili che consentono di accedere alle informazioni sull'evento e di interagire con esso.
target
La proprietà target si riferisce all'elemento che ha generato l'evento. Aiuta a determinare quale elemento è stato cliccato, passato sopra con il mouse o con cui si è interagito.
index.html
index.css
index.js
event.target viene utilizzato per identificare il pulsante specifico che è stato cliccato e il suo id viene visualizzato nel paragrafo con l'ID display.
type
La proprietà type fornisce il tipo di evento che si è verificato (ad esempio, click, submit, keydown).
index.html
index.css
index.js
Il event.type viene visualizzato nel paragrafo come feedback, mostrando che si è verificato un evento click. Inoltre, quando si fa clic sul pulsante, il colore di sfondo dell'intero body viene cambiato in lightblue.
Metodo preventDefault() nell'oggetto Event
Il metodo preventDefault() interrompe il comportamento predefinito di un elemento, come ad esempio impedire a un link di navigare o evitare l'invio di un modulo.
index.html
index.css
index.js
Qui, preventDefault() impedisce l'azione predefinita (navigazione verso una nuova pagina) quando si clicca sul link. Invece, viene visualizzato un avviso.
Esempio pratico: Gestione dell'invio di un modulo e utilizzo dell'oggetto evento
Validazione di un modulo, prevenzione dell'invio se i campi sono vuoti e visualizzazione dei dati del modulo insieme alle informazioni relative all'evento come target, type e come preventDefault() impedisce l'invio predefinito del modulo.
index.html
index.css
index.js
Quando il modulo "Sign Up" viene inviato, un event listener intercetta l'invio con event.preventDefault(). Se uno dei campi username o password è vuoto, viene visualizzato un messaggio di errore; altrimenti, appare un messaggio di successo che mostra l'username inviato. Inoltre, i dettagli sull'evento—come tipo, ID del modulo e se l'azione predefinita è stata impedita—sono mostrati in una sezione dedicata. Il modulo viene poi reimpostato per un ulteriore utilizzo.
1. Quali informazioni fornisce la proprietà event.target?
2. Perché potresti utilizzare event.preventDefault() in un evento di invio di un modulo?
Grazie per i tuoi commenti!
