Attributi di Evento Globali HTML

Un evento si verifica quando il browser reagisce a una particolare azione — un utente che fa clic su un pulsante del mouse, preme un tasto, riproduce un video, invia un modulo, ridimensiona la finestra e così via. Per rispondere a un evento, si collega un handler: un frammento di script (solitamente JavaScript) che viene eseguito quando l'evento si attiva.

HTML consente di collegare un handler direttamente nel markup tramite un attributo di evento. Ogni attributo di questa pagina inizia con on seguito dal nome dell'evento (onclick, onkeydown, onsubmit, …). Tutti sono stati aggiunti in HTML5 e accettano codice JavaScript come valore:

<button onclick="alert('Clicked!')">Click me</button>

Questi attributi di evento sono globali — la maggior parte può essere inserita su qualsiasi elemento — ma ciascuno ha senso solo nel contesto appropriato (attributi di modulo sui controlli di modulo, attributi media su <audio>/<video>, e così via).

Attenzione

Gli attributi inline on* sono sconsigliati nel codice moderno. Mescolano il comportamento nel markup, non permettono facilmente di collegare più di un handler e vengono bloccati da una rigida Content Security Policy. Preferire addEventListener in uno script separato, che mantiene HTML e JavaScript separati e consente a più handler di ascoltare lo stesso evento:

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", () => {
    alert("Clicked!");
  });
</script>

Le tabelle seguenti elencano gli attributi di evento per categoria. Per un trattamento più approfondito del funzionamento degli eventi nel browser, consultare JavaScript Events e i correlati HTML Global Attributes.

Attributi di Evento della Finestra

Gli eventi della finestra vengono attivati per l'oggetto window. Di solito vengono inseriti sul tag <body>, dove il browser li mappa su window.

Attributo	Descrizione
onafterprint	Si attiva dopo che il documento è stato stampato.
onbeforeprint	Si attiva prima che il documento venga stampato.
onbeforeunload	Si attiva prima che il documento venga scaricato (ad es. l'utente sta per lasciare la pagina).
onblur	Si attiva quando la finestra perde il focus (l'utente passa a un'altra scheda o applicazione).
onerror	Si attiva quando si verifica un errore durante il caricamento del documento o di una risorsa.
onhashchange	Si attiva quando il frammento (la parte dell'URL dopo `#`) cambia.
onload	Si attiva quando l'intera pagina — immagini, CSS e script — ha terminato il caricamento.
onmessage	Si attiva quando la finestra riceve un messaggio (ad es. da `postMessage`).
onoffline	Si attiva quando il browser perde la connessione di rete.
ononline	Si attiva quando il browser recupera la connessione di rete.
onpagehide	Si attiva quando l'utente naviga lontano dalla pagina.
onpageshow	Si attiva quando l'utente naviga verso la pagina.
onpopstate	Si attiva quando cambia la voce attiva nella cronologia.
onresize	Si attiva quando la finestra viene ridimensionata.
onstorage	Si attiva quando un'area di archiviazione web (`localStorage`/`sessionStorage`) viene aggiornata.
onunload	Si attiva quando la pagina viene scaricata (il documento viene rimosso).

<body onload="document.body.style.background = '#eef'">
  <p>This page changes its background colour once it has loaded.</p>
</body>

Attributi di Evento dei Moduli

Un evento che può verificarsi all'interno di un modulo è chiamato evento di modulo. Gli eventi di modulo si verificano quando un utente apre o chiude un modulo, si sposta tra moduli o lavora con i dati in un modulo.

Gli attributi di evento dei moduli possono essere applicati a tutti gli elementi HTML, ma vengono generalmente utilizzati con i controlli di modulo come <input>, <select> e <textarea>.

Attributo	Descrizione
onblur	Si attiva quando un elemento perde il focus (l'utente preme Tab o fa clic altrove su un controllo).
onchange	Si attiva quando il valore di un controllo è cambiato e il controllo perde il focus.
oncontextmenu	Si attiva quando il menu contestuale (clic destro) viene aperto sull'elemento.
onfocus	Si attiva quando un elemento acquisisce il focus.
oninput	Si attiva immediatamente ogni volta che il valore di un controllo cambia.
oninvalid	Si attiva quando un controllo inviato non supera la validazione dei vincoli.
onreset	Si attiva quando un modulo viene reimpostato ai valori iniziali.
onsearch	Si attiva quando l'utente effettua una ricerca in un campo `<input type="search">`.
onselect	Si attiva quando l'utente seleziona del testo all'interno di un `<input>` o `<textarea>`.
onsubmit	Si attiva quando un modulo viene inviato.

<form onsubmit="alert('Submitting…'); return false;">
  <input type="text" name="name"
         onfocus="this.style.background = '#ffd'"
         onblur="this.style.background = ''"
         placeholder="Your name">
  <button type="submit">Send</button>
</form>

Restituire false da onsubmit (o chiamare event.preventDefault() in JavaScript) impedisce che il modulo venga effettivamente inviato — utile durante i test.

Attributi di Evento della Tastiera

Gli attributi di evento della tastiera possono essere applicati a tutti gli elementi HTML.

Attributo	Descrizione
onkeydown	Si attiva quando un tasto viene premuto. Si ripete mentre il tasto è tenuto premuto.
onkeypress	Si attiva quando viene premuto un tasto carattere. Deprecato — usare invece `onkeydown`.
onkeyup	Si attiva quando un tasto premuto viene rilasciato.

<input type="text"
       onkeyup="document.getElementById('echo').textContent = this.value"
       placeholder="Type here">
<p>You typed: <span id="echo"></span></p>

Attributi di Evento del Mouse

Gli eventi del mouse si verificano quando il mouse interagisce con il documento HTML. Gli attributi possono essere applicati a tutti gli elementi HTML.

Attributo	Descrizione
onclick	Si attiva quando si fa clic sull'elemento.
ondblclick	Si attiva quando si fa doppio clic sull'elemento.
ondrag	Si attiva ripetutamente mentre un elemento viene trascinato.
ondragend	Si attiva quando termina un'operazione di trascinamento.
ondragenter	Si attiva quando un elemento trascinato entra in un target di rilascio valido.
ondragleave	Si attiva quando un elemento trascinato lascia un target di rilascio valido.
ondragover	Si attiva ripetutamente mentre un elemento trascinato si trova sopra un target di rilascio valido.
ondragstart	Si attiva quando l'utente inizia a trascinare un elemento.
ondrop	Si attiva quando un elemento trascinato viene rilasciato su un target di rilascio valido.
onmousedown	Si attiva quando un pulsante del mouse viene premuto sull'elemento.
onmousemove	Si attiva ogni volta che il puntatore si sposta mentre è sull'elemento.
onmouseout	Si attiva quando il puntatore esce dall'elemento.
onmouseover	Si attiva quando il puntatore si sposta sull'elemento.
onmouseup	Si attiva quando un pulsante del mouse viene rilasciato sull'elemento.
onmousewheel	Obsoleto — usare invece `onwheel`.
onscroll	Si attiva quando la barra di scorrimento di un elemento viene scorsa.
onwheel	Si attiva quando la rotella del mouse scorre verso l'alto o il basso sull'elemento.

<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
     style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
  Move the mouse here
</div>

Attributi di Evento degli Appunti

Attributo	Descrizione
oncopy	Si attiva quando il contenuto di un elemento viene copiato.
oncut	Si attiva quando il contenuto di un elemento viene tagliato.
onpaste	Si attiva quando del contenuto viene incollato in un elemento.

Attributi di Evento dei Media

Gli eventi media si verificano negli elementi media, come video, immagini e audio. Gli attributi possono essere applicati a qualsiasi elemento HTML, ma vengono generalmente utilizzati all'interno degli elementi audio, embed, img, object e video.

Attributo	Descrizione
onabort	Si attiva quando il caricamento del media viene interrotto.
oncanplay	Si attiva quando il browser ha bufferizzato abbastanza da poter avviare la riproduzione.
oncanplaythrough	Si attiva quando il browser stima di poter riprodurre fino alla fine senza fermarsi per bufferizzare.
oncuechange	Si attiva quando il cue attivo di una traccia di testo (ad es. sottotitoli o didascalie) cambia.
ondurationchange	Si attiva quando cambia la durata del media.
onemptied	Si attiva quando il media diventa vuoto (ad es. la connessione viene persa).
onended	Si attiva quando la riproduzione raggiunge la fine del media.
onerror	Si attiva quando si verifica un errore durante il caricamento del media.
onloadeddata	Si attiva quando il frame corrente dei dati media è stato caricato.
onloadedmetadata	Si attiva quando i metadati (durata, dimensioni, …) sono stati caricati.
onloadstart	Si attiva quando il browser inizia a caricare il media.
onpause	Si attiva quando la riproduzione viene messa in pausa.
onplay	Si attiva quando la riproduzione inizia o riprende.
onplaying	Si attiva quando la riproduzione è effettivamente in corso (ad esempio dopo il buffering).
onprogress	Si attiva periodicamente mentre il browser sta caricando il media.
onratechange	Si attiva quando cambia la velocità di riproduzione (ad es. avanzamento rapido).
onseeked	Si attiva quando termina un'operazione di ricerca.
onseeking	Si attiva quando inizia un'operazione di ricerca.
onstalled	Si attiva quando il browser tenta, ma non riesce, a recuperare i dati media.
onsuspend	Si attiva quando il caricamento del media viene intenzionalmente messo in pausa.
ontimeupdate	Si attiva quando la posizione di riproduzione cambia durante la riproduzione.
onvolumechange	Si attiva quando cambia il volume (inclusa la disattivazione dell'audio).
onwaiting	Si attiva quando la riproduzione si interrompe perché il frame successivo non è ancora bufferizzato.

Altri Eventi

Attributo	Descrizione
ontoggle	Si attiva quando l'utente apre o chiude un elemento `<details>`.

Informazione

Alcuni attributi che si possono trovare in riferimenti più vecchi — onredo, onundo e onshow — non hanno mai fatto parte dello standard HTML o non sono supportati dai browser, quindi sono stati omessi qui.

Esercizio

Pratica

Cosa sono gli attributi di evento globali in HTML?

Attributi on*, disponibili sulla maggior parte degli elementi HTML, che eseguono JavaScript quando si verifica un evento corrispondente.Attributi che inviano dati al server quando si verifica un evento.Handler di eventi che funzionano solo sugli elementi di modulo.Un sostituto di addEventListener che i browser non supportano più.