SyntheticEvent

Ez a referencia útmutató a SyntheticEvent csomagolót dokumentálja, ami a React Eseményrendszere egy részét képzi. Ha többet szeretnél tanulni erről, nézd meg az Események kezelése útmutatót.

Áttekintés

Az eseménykezelőidnek a SyntheticEvent példányai lesznek átadva, ami egy böngészőtől független konténer, a böngésző natív eseményei körül. Ugyanazzal az interfésszel rendelkezik mint a natív események, a stopPropagation()-t és a preventDefault()-ot beleértve, kivéve, hogy ezek az események a böngészőktől függetlenül egységesen működnek.

Ha azon kapod magad, hogy valamiért szükséged van az egyik mögöttes böngészőeseményre, nativeEvent attribútummal egyszerűen hozzáférhetsz ahhoz. A szintetikus események különböznek, és nem közvetlenül képezik le a natív böngésző eseményeket. Például az onMouseLeave-ben az event.nativeEvent a mouseout eseményre fog mutatni. A pontos leképezés nem része a nyilvános API-nek, és bármikor megváltozhat. Minden SyntheticEvent objektum a következő attribútumokkal rendelkezik:

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

Megjegyzés:

A v0.14-től kezdve false érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az e.stopPropagation()-t, vagy az e.preventDefault-ot, attól függően melyik a helyes a te esetedben.

Események összegyűjtése

A SyntheticEvent egy közös készletben van. Ez azt jelenti, hogy a SyntheticEvent objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. Ez a teljesítmény növelése érdekében történik. Így az eseményhez nem férhetsz aszinkron módon.

function onClick(event) {
  console.log(event); // => kinullázott objektum.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

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

  // Nem fog működni. A this.state.clickEvent csak null értékeket fog tartalmazni.
  this.setState({clickEvent: event});

  // Az esemény értékeket még így is ki tudod exportálni.
  this.setState({eventType: event.type});
}

Megjegyzés:

Ha szeretnél az események tulajdonságaihoz aszinkron módon hozzáférni, meg kell hogy hívd az event.persist() metódust az eseményen, ami eltávolítja a szintetikus eseményt a medencéből és lehetővé teszi az eseményre mutató hivatkozások megtartását felhasználói kóddal.

Támogatott események

A React normalizálja az eseményeket annak érdekében, hogy a tulajdonságaik egységesek legyenek böngészőtől függetlenül.

Az alábbi eseménykezelők egy esemény által lettek elindítva a “bubbling” fázisban. Egy eseménykezelő regisztrálásához a “capture” fázisban add hozzá a Capture szót az esemény nevéhez; például az onClick helyett használd az onClickCapture-t kattintási események kezeléséhez a capture fázisban.


Referencia

Vágólapesemények

Eseménynevek:

onCopy onCut onPaste

Tulajdonságok:

DOMDataTransfer clipboardData

Kompozíció-események

Eseménynevek:

onCompositionEnd onCompositionStart onCompositionUpdate

Tulajdonságok:

string data

Billentyűzet-események

Eseménynevek:

onKeyDown onKeyPress onKeyUp

Tulajdonságok:

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

A key tulajdonság bármilyen értéket felvehet, ami szerepel a 3-as szintű DOM események specifikációjában.


Fókuszálás-események

Eseménynevek:

onFocus onBlur

Ezek a fókuszálás-események minden elemen működnek a React DOM-ban, nem csak az űrlapelemeken.

Tulajdonságok:

DOMEventTarget relatedTarget

Űrlapesemények

Eseménynevek:

onChange onInput onInvalid onReset onSubmit 

Még több információért az onChange eseményről, nézd meg az Űrlapok fejezetet. For more information about the onChange event, see Forms.


Általános események

Eseménynevek:

onError onLoad

Egéresemények

Eseménynevek:

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

Az onMouseEnter és onMouseLeave események a normális bubbling helyett abból az elemből terjednek, amiből az egér épp kilépett, afelé az elem felé, amibe belelépett, és nincs capture fázisuk.

Tulajdonságok:

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

Mutatóesemények

Eseménynevek:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Az onPointerEnter és onPointerLeave események a normális bubbling helyett abból az elemből terjednek, amiből a mutató épp kilépett, afelé az elem felé, amibe belelépett, és nincs capture fázisuk.

Tulajdonságok:

A W3 specifikációt követve, a mutatóesemények az Egéreseményeket terjesztik ki a következő tulajdonságokkal:

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

Egy megjegyzés böngészők közötti támogatásról:

A mutatóesemények még nem minden böngésző által támogatottak (ennek a cikknek az írása közben a következő böngészők támogatják: Chrome, Firefox, Edge, és Internet Explorer). A React szándékosan nem használ polyfillt más böngészők támogatásához, mert egy standardhoz idomuló polyfill jelentősen növelné a react-dom csomagméretét.

Ha az alkalmazásod mutatóeseményeket használ, azt ajánljuk, hogy adj hozzá egy harmadik féltől származó esemény polyfillt.


Kiválasztás-események

Eseménynevek:

onSelect

Érintőesemények

Eseménynevek:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Tulajdonságok:

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

Felhasználói felület eseményei

Eseménynevek:

onScroll

Tulajdonságok:

number detail
DOMAbstractView view

Görgőesemények

Eseménynevek:

onWheel

Tulajdonságok:

number deltaMode
number deltaX
number deltaY
number deltaZ

Médiaesemények

Eseménynevek:

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

Képesemények

Eseménynevek:

onLoad onError

Animáció-események

Eseménynevek:

onAnimationStart onAnimationEnd onAnimationIteration

Tulajdonságok:

string animationName
string pseudoElement
float elapsedTime

Átmenet-események

Eseménynevek:

onTransitionEnd

Tulajdonságok:

string propertyName
string pseudoElement
float elapsedTime

Egyéb események

Eseménynevek:

onToggle
Is this page useful?Az oldal szerkesztése