SyntheticEvent

Bu başvuru rehberinde, React Olay Sistemi’nin bir parçasını oluşturan SyntheticEvent sarmalayıcısı (wrapper) açıklanmaktadır. Daha fazla bigli sahibi olmak için Olay Yönetimi kaynağını inceleyebilirsiniz.

Genel Bakış

Olay yöneticilerinize, tarayıcının kendi olaylarını sarmalayan bir çapraz-tarayıcı SyntheticEvent nesnesi iletilir. Bu nesne tüm tarayıcılarda aynı şekilde çalışması dışında, stopPropagation() ve preventDefault() dahil olmak üzere, tarayıcının kendi olayıyla aynı arabirime sahiptir.

Bir nedenden ötürü esas tarayıcı olayına ihtiyaç duyarsanız, basitçe nativeEvent özelliğini kullanın. Her SyntheticEvent nesnesi aşağıdaki özelliklere sahiptir:

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

Not:

v0.14 itibariyle, bir olay yöneticisinden false döndürmek artık olay yayılımını durdurmayacaktır. Bunun yerine, uygun görüldüğü şekilde e.stopPropagation() ya da e.preventDefault() manuel olarak tetiklenmelidir.

Olay Ortaklama (Event Pooling)

SyntheticEvent ortaklanmıştır. Bu, SyntheticEvent nesnesinin tekrar kullanılacağı ve olay geri dönmesinin (callback) çağrılması durumunda tüm özelliklerinin sıfırlanacağı anlamına gelmektedir. Bu durum performans sebeplerinden kaynaklanmaktadır. Böyle olunca da, olaya asenkron bir şekilde erişmeniz mümkün değildir.

function onClick(event) {
  console.log(event); // => null'lanmış nesne.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

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

  // Çalışmayacaktır. this.state.clickEvent sadece null değerleri içerecektir.
  this.setState({clickEvent: event});

  // Olay özelliklerini yine de dışarı aktarabilirsiniz.
  this.setState({eventType: event.type});
}

Not:

Olay özelliklerine asenkron bir şekilde erişmek isterseniz, olay üzerinde event.persist() çağırmalısınız. Bu şekilde sentetik olay havuzdan çıkarılır ve olay referanslarının kullanıcı kodu tarafından korunmasına olanak sağlanır.

Desteklenen Olaylar

React olayları normalleştirir ve olaylar bu şekilde farklı tarayıcılarda tutarlı özelliklere sahip olur.

Aşağıdaki olay yöneticileri, balonlanma (bubbling) evresinde bir olay tarafından tetiklenir. Yakalama evresine bir olay yöneticisi kaydetmek için, olay ismine Capture ilave edin. Örneğin tıklama olayını, yakalama evresinde yönetmek için onClick kullanmak yerine onClickCapture kullanın.


Kaynak

Not Panosu Olayları

Olay isimleri:

onCopy onCut onPaste

Özellikler:

DOMDataTransfer clipboardData

Kompozisyon Olayları

Olay isimleri:

onCompositionEnd onCompositionStart onCompositionUpdate

Özellikler:

string data

Klavye Olayları

Olay isimleri:

onKeyDown onKeyPress onKeyUp

Özellikler:

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 özelliği DOM 3. Seviye Olaylar Belirlemeleri‘nde belgelenen tüm değerleri alabilir.


Odaklanma Olayları

Olay isimleri:

onFocus onBlur

Bu odaklanma olayları sadece form elemanlarında değil, React DOM’daki tüm elemanlarda çalışmaktadır.

Özellikler:

DOMEventTarget relatedTarget

Form Olayları

Olay isimleri:

onChange onInput onInvalid onSubmit

onChage olayı ile ilgili daha fazla bilgi için Formlar‘ı inceleyin.


Fare Olayları

Olay isimleri:

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

onMouseEnter ve onMouseLeave olayları, olağan balonlanma yerine bırakılan elemandan girilen elemana doğru yayılırlar ve yakalama evreleri yoktur.

Özellikler:

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

İşaretçi Olayları

Olay isimleri:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

onMouseEnter ve onMouseLeave olayları, olağan balonlanma yerine bırakılan elemandan girilen elemana doğru yayılırlar ve yakalama evreleri yoktur.

Özellikler:

W3 belirlemeleri‘nde tanımlandığı üzere, işaretçi olayları Fare Olayları‘nı aşağıdaki özellikler ile genişletir.

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

Çapraz-tarayıcı desteği üzerine bir not:

İşaretçi olayları henüz tüm tarayıcılarda desteklenmemektedir (Bu makalenin yazıldığı tarihte destekleyen tarayıcılar: Chrome, Firefox, Edge ve Internet Explorer). React, react-dom paket boyutunun önemli bit ölçüde artmaması için kasıtlı olarak diğer tarayıcılar için polyfill desteği sunmamaktadır.

Eğer uygulamanızda işaretçi olaylarına ihtiyaç duyarsanız, üçüncü parti bir işaretçi olay polyfill’i kullanmanızı öneririz.


Seçme Olayları

Olay isimleri:

onSelect

Dokunma Olayları

Olay isimleri:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Özellikler:

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

Kullanıcı Arayüzü Olayları

Olay isimleri:

onScroll

Özellikler:

number detail
DOMAbstractView view

Tekerler Olayları

Olay isimleri:

onWheel

Özellikler:

number deltaMode
number deltaX
number deltaY
number deltaZ

Medya Olayları

Olay isimleri:

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

Resim Olayları

Olay isimleri:

onLoad onError

Animasyon Olayları

Olay isimleri:

onAnimationStart onAnimationEnd onAnimationIteration

Özellikler:

string animationName
string pseudoElement
float elapsedTime

Geçiş Olayları

Olay isimleri:

onTransitionEnd

Özellikler:

string propertyName
string pseudoElement
float elapsedTime

Diğer Olaylar

Olay isimleri:

onToggle