SyntheticEvent

Bu arayış React-in Hadisə Sisteminin bir hissəsini yaradan SyntheticEvent-i əhatə edir. Əlavə məlumat üçün Hadisələrin Emal Edilməsi sənədinə baxın.

İcmal

Hadisə işləyiciləri React-ə SyntheticEvent-in instansiyaları kimi ötürüləcək. SyntheticEvent bütün brauzerlərdə eyni olan brauzerin nativ hadisəsini əhatə edən obyektdir. Bunun interfeysi stopPropagation()preventDefault() daxil olmaqla brauzerin nativ hadisəsi interfeysi ilə eynidir. Brauzerlərin Hadisələrinin özünəməxsus tətbiqindən fərqli olaraq SyntecticEvent bütün brauzerlərdə eyni formada işləmir.

Əgər sizə hər hansı səbəbə görə brauzerin hadisəsi lazımdırsa, nativeEvent atributundan istifadə edin. Hər bir SyntheticEvent obyektinin aşağıda göstərilən atributları var:

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

Qeyd:

v0.14-cü versiyadan başlayaraq, hadisə işləyicilərindən false qaytardıqda hadisə yayılması dayandırılmayacaq. Bunun əvəzinə e.stopPropagation() və ya e.preventDefault() çağrılmalıdır.

Hadisə Pulinqi

SyntheticEvent pul olunur. Bu deməkdir ki, hadisə callback-i çağrıldıqdan sonra SyntheticEvent obyekti yenidən işlədiləcək və bütün parametrləri sıfırlanacaq. Bunun səbəbi performans ilə bağlıdır. Bu səbəbdən siz hadisəni asinxron formada işlədə bilməzsiniz.

function onClick(event) {
  console.log(event); // => sıfırlanmış obyekt.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

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

  // Aşağıdakı işləməyəcək. this.state.clickEvent yalnız null dəyəri saxlayacaq.
  this.setState({clickEvent: event});

  // Siz yenə də hadisə parametrlərini ixrac edə biləcəksiniz.
  this.setState({eventType: event.type});
}

Qeyd:

Əgər hadisə parametrlərini asinxron formada işlətmək istəyirsinizsə, siz hadisədə event.persist() funksiyasını çağırmalısınız. Bu funksiya sintetik hadisəni puldan siləcək və istifadəçi kodunda hadisəyə referans saxlamağa icazə verəcək.

Dəstəklənən Hadisələr

Bütün brauzerlərdə eyni parametrlərinin olması üçün, React hadisələri normallaşdırır.

Hadisə işləyiciləri hadisə tərəfindən bubbling fazasında çağrılır. Hadisə işləyicisini capture fazasında qeyd etmək üçün hadisə adının sonuna Capture mətnini əlavə edin. Məsələn, capture fazasında tıklama hadisəsini qeyd etmək üçün onClick əvəzinə onClickCapture işlətməlisiniz.


Arayış

Clipboard Hadisələri

Hadisə adları:

onCopy onCut onPaste

Parametrlər:

DOMDataTransfer clipboardData

Kompozisiya Hadisələri

Hadisə adları:

onCompositionEnd onCompositionStart onCompositionUpdate

Parametrlər:

string data

Klaviatur Hadisələri

Hadisə adları:

onKeyDown onKeyPress onKeyUp

Parametrlər:

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

key parametri DOM-un 3-cü səviyyəli Hadisələr spesifikasiyasında olan bütün dəyərləri qəbul edə bilər.


Fokus Hadisələri

Hadisə adları:

onFocus onBlur

Fokus hadisələri yalnız anketlərdə yox, React DOM-da olan bütün elementlərdə də işləyirlər.

Parametrlər:

DOMEventTarget relatedTarget

Anket Hadisələri

Hadisə adları:

onChange onInput onInvalid onSubmit

onChange hadisəsi haqqında əlavə məlumat üçün Anketlər sənədinə baxın.


Maus Hadisələri

Hadisə adları:

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

onMouseEnteronMouseLeave hadisələri siravi bubbling əvəzinə çıxan elementdən daxil olan elementə yayılırlar. Əlavə olaraq bu hadisələrin capture fazası yoxdur.

Parametrlər:

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

Pointer Hadisələri

Hadisə adları:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

onPointerEnteronPointerLeave hadisələri siravi bubbling əvəzinə çıxan elementdən daxil olan elementə yayılırlar. Əlavə olaraq bu hadisələrin capture fazası yoxdur.

Parametrlər:

W3 spesifikasiyasında müəyyənləşdirildiyi kimi, pointer hadisələri Maus Hadisələrini aşağıdakı parametrlər ilə genişləndirirlər:

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

Brauzer dəstəyi haqqında qeyd:

Pointer hadisələri bütün brauzerlər tərəfindən dəstəklənmirlər (bu sənədin yazıldığı zamanda yalnız Chrome, Firefox, Edge, və Internet Explorer bu hadisələri dəstəkləyir). React bilərəkdən digər brauzerlər üçün polifil dəstəkləmir. Bunun səbəni polifilin react-dom paketini ölçüsünü çox böyütməsidir.

Əgər sizin applikasiyanıza pointer hadisələri lazımdırsa biz 3-cü tərəfli pointer hadisəsi polifili işlətməyi tövsiyyə edirik.


Seleksiya Hadisələri

Hadisə adları:

onSelect

Toxunuş Hadisələri

Hadisə adları:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Parametrlər:

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

UI Hadisələri

Hadisə adları:

onScroll

Parametrlər:

number detail
DOMAbstractView view

Wheel Hadisələri

Hadisə adları:

onWheel

Parametrlər:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Hadisələri

Hadisə adları:

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

Şəkil Hadisələri

Hadisə adları:

onLoad onError

Animasiya Hadisələri

Hadisə adları:

onAnimationStart onAnimationEnd onAnimationIteration

Parametrlər:

string animationName
string pseudoElement
float elapsedTime

Keçid Hadisələri

Hadisə adları:

onTransitionEnd

Parametrlər:

string propertyName
string pseudoElement
float elapsedTime

Digər Hadisələr

Hadisə adları:

onToggle