Статьи / JavaScript / Reactjs (документация, руководство, примеры, flux) / Справочник (Reference)

Система событий

Искусственное событие (SyntheticEvent)

Ваши обработчики событий будут переданы экземплярам SyntheticEvent, кросс-браузерной обертке вокруг родного события браузера. Оно имеет такой же интерфейс, как и родное событие браузера, включая stopPropagation() и preventDefault(), за исключением события работающих одинаково во всех браузерах.

Если вы обнаружите, что вам нужно основное событии браузера по какой-то причине, просто используйте nativeEvent атрибут, чтобы получить его. Каждый объект SyntheticEvent имеет следующие атрибуты:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
Number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
void stopPropagation()
DOMEventTarget target
Date timeStamp
String type

Примечание:

По состоянию на v0.12, возвращение false из обработчика событий больше не будет останавливать распространение события. Вместо этого, следует включить вручную e.stopPropagation() или e.preventDefault(), в случае необходимости.

Поддерживаемые События

React нормализует события так, что они имеют стабильные характеристики в различных браузерах.

Обработчики событий ниже срабатывают по событию во всплывающей фазе. Для регистрации обработчика событий для фазы захвата, добавьте Capture с именем события; Например, вместо того, чтобы использовать onClick, вы должны использовать onClickCapture чтобы обработать событие щелчка в фазе захвата.

События буфера обмена

Имена событий:

onCopy onCut onPaste

Свойства:

DOMDataTransfer clipboardData

События клавиатуры

Имена событий:

onKeyDown onKeyPress onKeyUp

Свойства:

boolean altKey
Number charCode
boolean ctrlKey
function getModifierState(key)
String key
Number keyCode
String locale
Number location
boolean metaKey
boolean repeat
boolean shiftKey
Number which

События Фокуса

Имена событий:

onFocus onBlur

Свойства:

DOMEventTarget relatedTarget 

События Формы

Имена событий:

onChange onInput onSubmit

Для получения дополнительной информации о событии OnChange, см Формы.

События мыши

Имена событий:

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

Свойства:

boolean altKey
Number button
Number buttons
Number clientX
Number clientY
boolean ctrlKey
function getModifierState(key)
boolean metaKey
Number pageX
Number pageY
DOMEventTarget relatedTarget
Number screenX
Number screenY
boolean shiftKey

События прикосновения (Touch)

Для активации touch событий, вызовите React.initializeTouchEvents(true) перед рендерингом любого компонента.

Имена событий:

onTouchCancel onTouchEnd onTouchMove onTouchStart

Свойства:

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

События пользовательского интерфейса UI

Имена событий:

onScroll

Свойства:

Number detail
DOMAbstractView view

События колеса прокрутки

Имена событий:

onWheel

Свойства:

Number deltaMode
Number deltaX
Number deltaY
Number deltaZ