Skip to content

Elenco degli eventi

1. Eventi del mouse

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
clickonclickMouseEventQuando viene fatto clic su un elemento
dblclickondblclickMouseEventQuando un elemento viene cliccato due volte
mousedownonmousedownMouseEventQuando viene premuto un pulsante del mouse
mouseuponmouseupMouseEventQuando il pulsante del mouse viene rilasciato
mousemoveonmousemoveMouseEventQuando il mouse viene spostato
mouseoveronmouseoverMouseEventQuando il mouse passa sopra un elemento
mouseoutonmouseoutMouseEventQuando il mouse si allontana dall'elemento
mouseenteronmouseenterMouseEventQuando il mouse entra nell'elemento (senza bubbling)
mouseleaveonmouseleaveMouseEventQuando il mouse abbandona l'elemento (senza bubbling)
contextmenuoncontextmenuMouseEventQuando viene aperto il menu del tasto destro del mouse

2. Eventi del puntatore

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
pointerdownonpointerdownPointerEventQuando viene premuto il puntatore (touch, penna, mouse)
pointeruponpointerupPointerEventQuando il puntatore viene rilasciato
pointermoveonpointermovePointerEventQuando il puntatore viene spostato
pointeroveronpointeroverPointerEventQuando il puntatore passa sopra un elemento
pointeroutonpointeroutPointerEventQuando il puntatore esce dall'elemento
pointerenteronpointerenterPointerEventQuando il puntatore entra in un elemento (senza bubbling)
pointerleaveonpointerleavePointerEventQuando il puntatore abbandona l'elemento (senza bubbling)
pointercancelonpointercancelPointerEventQuando viene annullata un'operazione del puntatore
gotpointercaptureongotpointercapturePointerEventQuando viene acquisita una cattura del puntatore
lostpointercaptureonlostpointercapturePointerEventQuando la cattura di un puntatore è persa

3. Eventi touch

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
touchstartontouchstartTouchEventQuando lo schermo viene toccato
touchmoveontouchmoveTouchEventQuando il dito che tocca si muove
touchendontouchendTouchEventQuando il tocco termina
touchcancelontouchcancelTouchEventQuando un tocco viene annullato

4. Eventi della tastiera

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
keydownonkeydownKeyboardEventQuando viene premuto un tasto
keypressonkeypressKeyboardEvent⚠️ Deprecato - usare keydown
keyuponkeyupKeyboardEventQuando un tasto viene rilasciato

Informazioni sull'evento keypress

L'evento keypress è deprecato dallo standard web.

Motivi della deprecazione:

  • Supporto insufficiente per l'internazionalizzazione (ad es. problemi con l'input in giapponese)
  • Comportamento instabile in combinazione con i tasti modificatori (Shift, Ctrl, Alt)
  • Supporto limitato sui dispositivi mobili

Alternative consigliate:

typescript
// ❌ Deprecato
fromEvent(input, 'keypress')
  .subscribe(event => console.log(event));

// ✅ Consigliato: usare keydown
fromEvent<KeyboardEvent>(input, 'keydown')
  .subscribe(event => console.log(event.key));

Eventi consigliati per caso d'uso:

  • Rilevamento dell'input di testo: evento input (consigliato)
  • Rilevamento della pressione dei tasti: evento keydown
  • Rilevamento del rilascio di un tasto: evento keyup

5. Eventi relativi al focus

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
focusonfocusFocusEventQuando un elemento riceve il focus
bluronblurFocusEventQuando il focus viene rimosso da un elemento
focusinonfocusinFocusEventQuando un elemento o un elemento figlio riceve il focus
focusoutonfocusoutFocusEventQuando un elemento o un elemento figlio perde il focus

6. Eventi del form

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
changeonchangeEventQuando il contenuto dell'input viene cambiato
inputoninputInputEventQuando il valore di un campo di input viene modificato
submitonsubmitSubmitEventQuando viene inviato un form
resetonresetEventQuando un form viene reimpostato
selectonselectEventQuando il testo viene selezionato

7. Eventi drag & drop

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
dragondragDragEventMentre un elemento viene trascinato
dragstartondragstartDragEventQuando viene avviato un trascinamento
dragendondragendDragEventQuando il trascinamento termina
dragoverondragoverDragEventQuando l'elemento trascinato è sopra un altro elemento
dragenterondragenterDragEventQuando l'elemento trascinato entra nel target
dragleaveondragleaveDragEventQuando l'elemento trascinato esce dal target
dropondropDragEventQuando l'elemento trascinato viene rilasciato

8. Eventi finestra e documento

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
loadonloadEventQuando la pagina è completamente caricata
resizeonresizeUIEventQuando la dimensione della finestra viene modificata
scrollonscrollEventQuando la pagina viene scrollata
unloadonunloadEventQuando la pagina viene chiusa
beforeunloadonbeforeunloadBeforeUnloadEventAppena prima che la pagina venga chiusa
erroronerrorErrorEventQuando si verifica un errore
visibilitychangeonvisibilitychangeEventQuando cambia lo stato di visualizzazione della pagina (es. cambio di scheda)
fullscreenchangeonfullscreenchangeEventQuando cambia lo stato di schermo intero

9. Eventi multimediali

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
playonplayEventQuando inizia la riproduzione multimediale
pauseonpauseEventQuando la riproduzione multimediale è in pausa
endedonendedEventQuando la riproduzione multimediale termina
volumechangeonvolumechangeEventQuando il volume del media viene modificato
seekingonseekingEventQuando la ricerca del media è iniziata
seekedonseekedEventQuando la ricerca del media è completata
timeupdateontimeupdateEventQuando il tempo di riproduzione del media viene aggiornato

10. Eventi di animazione e transizione

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
animationstartonanimationstartAnimationEventQuando inizia l'animazione
animationendonanimationendAnimationEventQuando l'animazione finisce
animationiterationonanimationiterationAnimationEventQuando l'animazione viene ripetuta
transitionstartontransitionstartTransitionEventQuando viene avviata una transizione CSS
transitionendontransitionendTransitionEventQuando una transizione CSS termina

11. Altri eventi

Nome evento JavaScriptAttributo HTMLTipoDescrizioneDisponibilità con fromEvent
wheelonwheelWheelEventQuando la rotella del mouse viene ruotata
abortonabortUIEventQuando il caricamento delle risorse viene interrotto
hashchangeonhashchangeHashChangeEventQuando l'hash dell'URL (es. #section1) viene cambiato
messageonmessageMessageEventQuando viene ricevuto un messaggio dai Web Worker o da un iframe
onlineononlineEventQuando la rete torna online
offlineonofflineEventQuando la rete va offline
popstateonpopstatePopStateEventQuando lo stato cambia a causa di history.pushState o history.back
storageonstorageStorageEventQuando localStorage o sessionStorage viene modificato
languagechangeonlanguagechangeEventQuando viene cambiata l'impostazione della lingua (modifica delle impostazioni del browser)

Pubblicato sotto licenza CC-BY-4.0.