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