В этом справочном руководстве представлена SyntheticEvent обертка, которая является частью системы событий React.
Overview
Обработчикам событий будут переданы экземпляры SyntheticEvent, кросс-браузерная оболочка вокруг собственного события браузера. Он имеет тот же интерфейс, что и родное событие браузера, включая 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()
DOMEventTarget target
number timeStamp
string type
Заметка:
Начиная с v0.14, возврат false из обработчика события больше не останавливает распространение события. Вместо этого, 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() событие, которое удалит синтетическое событие из пула и позволит ссылаться на событие, которое будет сохранено кодом пользователя.
Поддерживаемые события
React нормализует события, чтобы они имели согласованные свойства в разных браузерах.
Обработчики событий, приведенные ниже, инициируются событием в фазе барботажа. Чтобы зарегистрировать обработчик событий для фазы захвата, добавьте Capture имя события; например, вместо использования onClick, вы должны использовать onClickCapture для обработки события click в фазе захвата.
- События в буфере обмена
- События композиции
- События в клавиатуре
- Фокусные события
- События формы
- События мыши
- События выбора
- Коснитесь событий
- События пользовательского интерфейса
- Колесные события
- Медиа-события
- События изображения
- Анимационные мероприятия
- Переходные события
Reference
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 спецификации.
Focus Events (Фокусные события)
Имена событий:
onFocus onBlur
Эти фокусные события работают на всех элементах React DOM, а не только на элементах формы.
Свойства:
DOMEventTarget relatedTarget
Form Events (События формы)
Имена событий:
onChange onInput onInvalid onSubmit
Mouse Events (События мыши)
Имена событий:
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
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
Другие события
Имена событий:
onToggle
0 комментариев