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:

Common components (e.g. <div>)

У цьому довідковому матеріалі описана обгортка SyntheticEvent, яка є частиною системи подій React. Дивіться інструкцію Обробка подій для більш детальної інформації.

Огляд

Ваші обробники подій отримують екземпляр SyntheticEvent — кроcбраузерну обгортку над нативною подією браузера. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи stopPropagation() та preventDefault(). Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах.

Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут nativeEvent. Синтетичні події відрізняються від нативних подій браузера. Наприклад, в onMouseLeave event.nativeEvent вказуватиме на подію mouseout. Конкретне відображення не є частиною загальнодоступного API і може змінитися в будь-який час. Нижче наведено перелік атрибутів об’єкта SyntheticEvent:

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

Примітка:

As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.

Примітка:

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

Підтримувані події

React нормалізує події таким чином, що вони мають одинакові властивості в усіх браузерах.

Обробники, які перелічені нижче, викликаються на фазі розповсюдження (bubbling). Для того щоб зареєструвати подію на фазі перехоплення (capture), просто додайте Capture до імені події; наприклад, замість використання onClick використовуйте onClickCapture, для того щоб опрацювати подію на стадії перехоплення.

Події буфера обміну
Композиційні події
Події клавіатури
Події фокусу
Події форм
Загальні Events
Події миші
Події курсору
Події вибору
Сенсорні події
Події інтерфейсу користувача
Події коліщатка миші
Події медіа-елементів
Події зображень
Події анімацій
Події переходів
Інші події

Довідка

Події буфера обміну

Назви подій:

onCopy onCut onPaste

Властивості:

DOMDataTransfer clipboardData

Композиційні події

Назви подій:

onCompositionEnd onCompositionStart onCompositionUpdate

Властивості:

string data

Події клавіатури

Назви подій:

onKeyDown onKeyPress onKeyUp

Властивості:

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 може приймати будь-які із задокументованих у DOM Level 3 Events spec значень.

Події фокусу

Назви подій:

onFocus onBlur

Ці події працюють зі всіма React- та DOM-елементами, а не тільки з елементами форм.

Властивості:

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>
  );
}

Події форм

Назви подій:

onChange onInput onInvalid onReset onSubmit

Для більш детальної інформації про подію onChange, відвідайте Форми.

Загальні Події

Назви подій:

onError onLoad

Події миші

Назви подій:

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

Події onMouseEnter та onMouseLeave розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення.

Властивості:

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

Події курсору

Назви подій:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Події onPointerEnter та onPointerLeave розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення.

Властивості:

Як вказано у W3 spec, події курсору наслідують Mouse Events з наступними властивостями:

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

Примітка з приводу кросбраузерності:

Події курсору ще не підтримуються всіма браузерами (на момент написання цієї статті підтримуються браузери: Chrome, Firefox, Edge, and Internet Explorer). React свідомо не поліфілізує підтримку в інших браузерах тому що це значно би збільшило розмір react-dom.

Якщо вашому застосунку необхідно використовувати події курсору, то ми радимо встановити сторонній поліфіл.

Події вибору

Назви подій:

onSelect

Сенсорні події

Назви подій:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Властивості:

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

Події інтерфейсу користувача

Назви подій:

onScroll

Note

Starting with React 17, the onScroll event does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.

Властивості:

number detail
DOMAbstractView view

Події коліщатка миші

Назви подій:

onWheel

Властивості:

number deltaMode
number deltaX
number deltaY
number deltaZ

Події медіа-елементів

Назви подій:

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

Події зображень

Назви подій:

onLoad onError

Події анімацій

Назви подій:

onAnimationStart onAnimationEnd onAnimationIteration

Властивості:

string animationName
string pseudoElement
float elapsedTime

Події переходів

Назви подій:

onTransitionEnd

Властивості:

string propertyName
string pseudoElement
float elapsedTime

Інші події

Назви подій:

onToggle

Is this page useful?Редагувати цю сторінку