Eventi JavaScript
Gli eventi HTML sono "cose" che accadono agli elementi HTML.
Quando JavaScript viene utilizzato nelle pagine HTML, JavaScript può "reagire" a questi eventi.
Eventi HTML
Un evento HTML può essere qualcosa che fa il browser o qualcosa che fa un utente.
Ecco alcuni esempi di eventi HTML:
- Una pagina Web HTML ha terminato il caricamento
- Un campo di input HTML è stato modificato
- È stato fatto clic su un pulsante HTML
Spesso, quando accadono eventi, potresti voler fare qualcosa.
JavaScript ti consente di eseguire codice quando vengono rilevati eventi.
HTML consente di aggiungere attributi del gestore eventi, con codice JavaScript , agli elementi HTML.
Con virgolette singole:
<element
event='some JavaScript'>
Con virgolette doppie:
<element
event="some JavaScript">
Nell'esempio seguente, a un elemento onclickviene aggiunto un attributo (con codice)
:<button>
Esempio
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
Nell'esempio sopra, il codice JavaScript cambia il contenuto dell'elemento con id="demo".
Nell'esempio successivo, il codice cambia il contenuto del proprio elemento (usando this.innerHTML):
Esempio
<button onclick="this.innerHTML = Date()">The time is?</button>
Il codice JavaScript è spesso lungo diverse righe. È più comune vedere gli attributi dell'evento che chiamano funzioni:
Esempio
<button onclick="displayDate()">The time is?</button>
Eventi HTML comuni
Ecco un elenco di alcuni eventi HTML comuni:
| Evento | Descrizione |
|---|---|
| in cambio | Un elemento HTML è stato modificato |
| al clic | L'utente fa clic su un elemento HTML |
| al passaggio del mouse | L'utente sposta il mouse su un elemento HTML |
| estromissione | L'utente allontana il mouse da un elemento HTML |
| onkeydown | L'utente preme un tasto della tastiera |
| caricare | Il browser ha terminato il caricamento della pagina |
L'elenco è molto più lungo: W3Schools JavaScript Reference HTML DOM Events .
Gestori di eventi JavaScript
I gestori di eventi possono essere utilizzati per gestire e verificare l'input dell'utente, le azioni dell'utente e le azioni del browser:
- Cose che dovrebbero essere fatte ogni volta che viene caricata una pagina
- Cose che dovrebbero essere fatte quando la pagina è chiusa
- Azione da eseguire quando un utente fa clic su un pulsante
- Contenuto che dovrebbe essere verificato quando un utente inserisce i dati
- E altro ancora...
È possibile utilizzare molti metodi diversi per consentire a JavaScript di funzionare con gli eventi:
- Gli attributi dell'evento HTML possono eseguire direttamente il codice JavaScript
- Gli attributi dell'evento HTML possono chiamare funzioni JavaScript
- Puoi assegnare le tue funzioni di gestione degli eventi agli elementi HTML
- È possibile impedire l'invio o la gestione di eventi
- E altro ancora...
Imparerai molto di più su eventi e gestori di eventi nei capitoli HTML DOM.