SyntheticEvent

Questa guida di riferimento documenta il contenitore SyntheticEvent che fa parte del sistema di eventi di React. Consulta la guida Gestione degli Eventi per saperne di più.

Panoramica

I tuoi event handlers riceveranno istanze di SyntheticEvent, un contenitore cross-browser intorno all’evento nativo del browser. Hanno entrambi la stessa interfaccia, compresi stopPropagation() e preventDefault(), l’eccezione sta nel fatto che gli eventi funzionano in modo identico in tutti i browser.

Se constatati avere bisogno del evento di browser sottostante per qualche motivo, semplice usi il nativeEvent attributo lo portarti. Ogni SyntheticEvent oggetto ha gli seguente attributi:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

Nota:

A partire da v0.14, ritornare false da un event handler non fermerà la propagazione dell’evento come avveniva in precedenza. Invece, e.stopPropagation() o e.preventDefault() dovrebbero essere invocati manualmente, ove opportuno.

Pooling degli Eventi

SyntheticEvent è pooled, ovvero “accomunato”. Questo significa che un oggetto SyntheticEvent sarà riutilizzato e che tutte proprietà verranno resettate a null non appena la callback dell’evento è stata invocata. Ciò avviene per migliorare le prestazioni. Per questo, non puoi avere accesso all’evento in modo asincrono.

function onClick(event) {
  console.log(event); // => oggetto nullifficato.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Non funzionerebbe. this.state.clickEvent conterrà solo valori nulli
  this.setState({clickEvent: event});

  // YPuoi comunque esportare le proprietà dell'evento.
  this.setState({eventType: event.type});
}

Nota:

Se vuoi avere accesso alle proprietà in modo asincrono, dovresti invocare event.persist() sull’evento, il quale rimuoverà l’evento sintetico dal pool permettendo ai riferimenti all’evento di rimanere mantenuti dal codice utente.

Eventi Supportati

React normalizza gli eventi per far sì che abbiano proprietà coerenti in tutti browser.

Gli event handlers di seguito vengono scatenati da un evento nella fase di bubbling. Per registrare un event handler per la fase di capture, aggiungi Capture al nome dell’evento; per esempio, invece di usare onClick, useresti onClickCapture per gestire l’evento click nella fase di capture.


Riferimento

Eventi degli Appunti

Nomi degli eventi:

onCopy onCut onPaste

Proprietà:

DOMDataTransfer clipboardData

Eventi della Composizione

Nomi degli eventi:

onCompositionEnd onCompositionStart onCompositionUpdate

Proprietà:

string data

Eventi della Tastiera

Nomi degli eventi:

onKeyDown onKeyPress onKeyUp

Proprietà:

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

La proprietà key può accettare uno qualsiasi dei valori documentati nelle specifiche degli Eventi del DOM Livello 3.


Eventi di Focus

Nomi degli eventi:

onFocus onBlur

Questi eventi di focus funzionano con tutti elementi nel React DOM, non solo elementi form.

Proprietà:

DOMEventTarget relatedTarget

Eventi di Form

Nomi degli eventi:

onChange onInput onInvalid onSubmit

Per maggiori informazioni sull’evento onChange, vedi Forms.


Eventi del Mouse

Nomi degli eventi:

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

Gli eventi onMouseEnter e onMouseLeave vengono propagati dall’elemento che viene lasciato a quello che viene acceduto invece di seguire il normale bubbling e non hanno una fase di capture. (Clicca qui per maggiori informazioni su bubbling e capture.

Proprietà:

boolean altKey
number button
number buttons
number clientX
number clientY
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
number pageX
number pageY
DOMEventTarget relatedTarget
number screenX
number screenY
boolean shiftKey

Eventi del Puntatore

Nomi degli eventi:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Gli eventi onPointerEnter e onPointerLeave vengono propagati dall’elemento che viene lasciato a quello che viene acceduto invece di seguire il normale bubbling e non hanno una fase di capture. (Clicca qui per maggiori informazioni su bubbling e capture.

Proprietà:

Come definito nelle specifiche W3, gli eventi del cursore estendono gli Eventi del Mouse con le seguente proprietà:

number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

Una nota sul supporto cross-browser:

Gli eventi del puntatore non sono ancora supportati in tutti i browser (al momento della scrittura di questo articolo), tra quelli supportati abbiamo: Chrome, Firefox, Edge, e Internet Explorer). React deliberatamente non offre supporto agli altri browsers mediante polyfill in quanto ciò aumenterebbe in modo considerevole la dimensione del pacchetto react-dom.

Se la tua applicazione richiede l’utilizzo degli eventi del puntatore, raccomandiamo l’uso di una polyfill specifica di terze parti.


Eventi della Selezione

Nomi degli eventi:

onSelect

Eventi Tattili

Nomi degli eventi:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Proprietà:

boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

Eventi dell’Interfaccia Utente

Nomi degli eventi:

onScroll

Proprietà:

number detail
DOMAbstractView view

Eventi della Rotella del Mouse

Nomi degli eventi:

onWheel

Proprietà:

number deltaMode
number deltaX
number deltaY
number deltaZ

Eventi dei Media

Nomi degli eventi:

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting

Eventi della Immagine

Nomi degli eventi:

onLoad onError

Eventi delle Animazioni

Nomi degli eventi:

onAnimationStart onAnimationEnd onAnimationIteration

Proprietà:

string animationName
string pseudoElement
float elapsedTime

Eventi della Transizione

Nomi degli eventi:

onTransitionEnd

Proprietà:

string propertyName
string pseudoElement
float elapsedTime

Altri Eventi

Nomi degli eventi:

onToggle