Eventi JavaScript

Gli eventi HTML sono cose che accadono sugli elementi HTML.

Quando si utilizza JavaScript in una pagina HTML, JavaScript è in grado di "rispondere" a questi eventi.

Eventi HTML

Gli eventi HTML possono essere qualcosa che il browser o l'utente fa.

Di seguito sono riportati alcuni esempi di eventi HTML:

  • La pagina HTML è stata caricata
  • Il campo di input HTML viene modificato
  • Il pulsante HTML viene cliccato

Di solito, quando si verifica un evento, l'utente vorrebbe fare qualcosa.

JavaScript ti permette di eseguire codice quando un evento viene rilevato.

attraverso il codice JavaScript, HTML ti permette di aggiungere gestori di eventi agli elementi HTML.

usare virgolette singole:

<element event='alcuni JavaScript>

usare virgolette doppi:

<element event="alcuni JavaScript">

Nel seguente esempio:onclick l'attributo (e il codice) sono aggiunti a <button> elemento:

Esempio

<button onclick='document.getElementById("demo").innerHTML=Date()'>Qual è l'ora ora?</button>

Prova tu stesso

Nel precedente esempio, il codice JavaScript ha modificato il contenuto dell'elemento con id="demo":

Nel seguente esempio, il codice (usando this.innerHTML）Ha modificato il contenuto del proprio elemento:

Esempio

<button onclick="this.innerHTML=Date()">Qual è l'ora ora?</button>

Prova tu stesso

Il codice JavaScript di solito ha molte righe. È più comune chiamare una funzione tramite l'attributo evento:

Esempio

<button onclick="displayDate()">Qual è l'ora ora?</button>

Prova tu stesso

Eventi HTML comuni

Di seguito sono elencati alcuni eventi HTML comuni:

evento descrizione
onchange L'elemento HTML è stato modificato
onclick L'utente ha cliccato sull'elemento HTML
onmouseover L'utente muove il mouse sopra l'elemento HTML
onmouseout L'utente trascina il mouse fuori dall'elemento HTML
onkeydown L'utente preme una tastiera
onload Il browser ha completato il caricamento della pagina

Elenco più completo:Manuale di riferimento JavaScript di CodeW3C.com per gli eventi HTML DOM.

Cosa può fare JavaScript?

I gestori degli eventi possono essere utilizzati per gestire, verificare l'input dell'utente, le azioni dell'utente e le azioni del browser:

  • Quello che dovrebbe essere fatto ogni volta che la pagina viene caricata.
  • Quello che dovrebbe essere fatto quando la pagina viene chiusa.
  • L'azione che dovrebbe essere eseguita quando l'utente clicca su un pulsante.
  • Il contenuto che dovrebbe essere verificato quando l'utente inserisce dati.
  • Etc.

Ci sono molte tecniche diverse per far gestire gli eventi con JavaScript:

  • Le proprietà degli eventi HTML possono eseguire codice JavaScript.
  • Le proprietà degli eventi HTML possono chiamare funzioni JavaScript.
  • Puoi assegnare la tua funzione di gestione degli eventi personalizzata agli elementi HTML.
  • Puoi prevenire che un evento venga inviato o gestito.
  • Etc.

Imparerai di più sugli eventi e i gestori degli eventi nella sezione DOM HTML.