We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 DillerGitHub

SyntheticEvent

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React and include live examples:

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. Sentetik olaylar, tarayıcının doğal (native) olaylarından farklıdır ve doğrudan bunlarla eşleşmez. Örneğin, onMouseLeave‘in içindeki event.nativeEvent bir mouseout olayına işaret edecektir. Spesifik eşleme, genel API’nin bir parçası değildir ve herhangi bir zamanda değişebilir. 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()
void persist()
DOMEventTarget target
number timeStamp
string type

Not:

React 17’den itibaren, e.persist() in bir işlevi kalmamıştır. Çünkü SyntheticEvent artık ortaklanmamaktadır. (event-pooling).

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.

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

onFocus

The onFocus event is called when the element (or some element inside of it) receives focus. For example, it’s called when the user clicks on a text input.

function Example() {
  return (
    <input
      onFocus={(e) => {
        console.log('Focused on input');
      }}
      placeholder="onFocus is triggered when you click this input."
    />
  )
}

onBlur

The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it’s called when the user clicks outside of a focused text input.

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}

Detecting Focus Entering and Leaving

You can use the currentTarget and relatedTarget to differentiate if the focusing or blurring events originated from outside of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.

function Example() {
  return (
    <div
      tabIndex={1}
      onFocus={(e) => {
        if (e.currentTarget === e.target) {
          console.log('focused self');
        } else {
          console.log('focused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus entered self');
        }
      }}
      onBlur={(e) => {
        if (e.currentTarget === e.target) {
          console.log('unfocused self');
        } else {
          console.log('unfocused child', e.target);
        }
        if (!e.currentTarget.contains(e.relatedTarget)) {
          // Not triggered when swapping focus between children
          console.log('focus left self');
        }
      }}
    >
      <input id="1" />
      <input id="2" />
    </div>
  );
}

Form Olayları

Olay isimleri:

onChange onInput onInvalid onReset onSubmit

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

Genel Olaylar

Olay isimleri:

onError onLoad

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

Not

React 17’den başlayarak, onScroll olayı balonlanma (bubbling) oluşturmaz. Bu, tarayıcı davranışıyla eşleşir ve iç içe yapıdaki kaydırılabilir bir öğe uzakta bulunan bir üst elemanda olayları (events) tetiklediğinde karışıklığı önler.

Özellikler:

number detail
DOMAbstractView view

Tekerlek 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
Bu sayfayı yararlı buldun mu?Bu sayfayı düzenle