SyntheticEvent

Това ръководство документира контейнера SyntheticEvent, който е част от системата за събития на React. Вижте ръководството Handling Events, за да научите повече.

Преглед

Вашите слушатели на събития ще приемат инстанции на SyntheticEvent, cross-browser контейнер около оригиналното събитие на браузъра. Той има същия интерфейс като оригиналното събитие, включително stopPropagation() и preventDefault(), с тази разлика че събитията работят във всички браузъри.

Ако установите, че се нуждаете от оригиналното браузър събитие по някаква причина, просто използвайте атрибута nativeEvent, за да го достъпите. Всеки обект 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

Бележка:

След версия v0.14, връщайки false от слушател на събития не спира event propagation-a. Вместо това, e.stopPropagation() или e.preventDefault() трябва да бъдат извикани ръчно, там където е нужно.

Event Pooling

SyntheticEvent се преизползва. Това означава, че обектът SyntheticEvent ще бъде използван отново и всички свойства ще бъдат анулирани след извикване на събитието. Това е във връзка с производителността. Заради това не можете да получите достъп до събитието по асинхронен начин.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

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

  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

Бележка:

Ако искате да получите достъп до свойствата на събитието по асинхронен начин, трябва да извикате event.persist(), което ще премахне синтетичното събитие от pool-a и ще позволи референциите към събитието да се запазят във вашия код.

Събития, които React поддържа

React нормализира събитията, така че да имат едни и същи свойства в различните браузъри.

Следните слушатели на събития се задействат от оригиналните събития в bubbling фазата. За да регистрирате слушател на събитие за capture фазата, добавете Capture към името на събитието; например, вместо да използвате onClick, използвайте onClickCapture.

• Clipboard Events
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Generic Events
• Mouse Events
• Pointer Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events
• Other Events

Описание

Clipboard Events

Име на събитията:

onCopy onCut onPaste

Свойства:

DOMDataTransfer clipboardData

Composition Events

Имена на събитията:

onCompositionEnd onCompositionStart onCompositionUpdate

Свойства:

string data

Keyboard Events

Имена на събитията:

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.

Focus Events

Имена на събитията:

onFocus onBlur

Тези събития за фокус работят върху всички елементи в React DOM, а не само на елементи във форми.

Свойства:

DOMEventTarget relatedTarget

Form Events

Имена на събитията:

onChange onInput onInvalid onReset onSubmit 

За повече информация относно onChange събитието, прегледайте Forms.

Generic Events

Имена на събитията:

onError onLoad

Mouse Events

Имена на събитията:

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

Събитията onMouseEnter и onMouseLeave се разпространяват от елемента, който напускаме, а не от този в който въвеждаме. Те нямат capture фаза.

Свойства:

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 Events

Имена на събитията:

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

Събитията onPointerEnter и onPointerLeave се разпространяват от елемента, който напускаме, а не от този който посочваме. Те нямат capture фаза.

Свойства:

Както е дефинирано в спецификацията W3, събития за посочване наследяват 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 и Internet Explorer). React умишлено не предлага polyfill за други браузъри, тъй като стандартния polyfill значително ще увеличи размера на пакета react-dom.

Ако приложението ви изисква събития за посочване, препоръчваме да добавите polyfill допълнително.

Selection Events

Име на събитията:

onSelect

Touch Events

Имена на събитията:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Свойства:

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

UI Events

Име на събитията:

onScroll

Свойства:

number detail
DOMAbstractView view

Wheel Events

Име на събитията:

onWheel

Свойства:

number deltaMode
number deltaX
number deltaY
number deltaZ

Media Events

Имена на събитията:

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

Image Events

Имена на събитията:

onLoad onError

Animation Events

Имена на събитията:

onAnimationStart onAnimationEnd onAnimationIteration

Свойства:

string animationName
string pseudoElement
float elapsedTime

Transition Events

Име на събитията:

onTransitionEnd

Свойства:

string propertyName
string pseudoElement
float elapsedTime

Other Events

Име на събитията:

onToggle