cheatsheets

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

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

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

Тип Свойства
DOMDataTransfer clipboardData

Композиционные события

Тип Свойства
string data

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

Тип Свойства
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

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

Эти события фокуса работают не только на элементах формы, но и на всех остальных элементах в React DOM.

Тип Свойства
DOMEventTarget relatedTarget

onFocus

Событие onFocus вызывается при перемещении фокуса на элемент (включая дочерние элементы внутри него).

function Example() {
    return (
        <input
            onFocus={(e) => {
                console.log('Получен фокус на поле ввода');
            }}
            placeholder="onFocus выполнится при нажатии на это поле ввода." />
    )
}

onBlur

Событие onBlur вызывается при пропадании фокуса с элемента (включая дочерние элементы внутри него).

function Example() {
    return (
        <input
            onBlur={(e) => {
                console.log('Пропал фокус с поля ввода');
            }}
            placeholder="onBlur выполнится в случае изменения фокуса с этого поля ввода на любой другой элемент." />
    )
}

Отслеживание получения и перемещения фокуса

Можно использовать свойства currentTarget и relatedTarget, чтобы определить, когда наступили события появления или исчезновения фокуса за пределами родительского элемента.

function Example() {
    return (
        <div
            tabIndex={1}
            onFocus={(e) => {
                if (e.currentTarget === e.target) {
                    console.log('фокус на родительском элементе установлен');
                } else {
                    console.log('фокус на дочернем элементе установлен', e.target);
                }
                if (!e.currentTarget.contains(e.relatedTarget)) {
                    // Не срабатывает при перемещении фокуса между дочерними элементами
                    console.log('фокус находится внутри родительского элемента');
                }
            }}
            onBlur={(e) => {
                if (e.currentTarget === e.target) {
                    console.log('фокус на родительском элементе снят');
                } else {
                    console.log('фокус на дочернем элементе снят', e.target);
                }
                if (!e.currentTarget.contains(e.relatedTarget)) {
                    // Не срабатывает при перемещении фокуса между дочерними элементами
                    console.log('фокус потерян изнутри родительского элемента');
                }
            }}
        >
            <input id="1" />
            <input id="2" />
        </div>
    );
}

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

Общие события

События мыши

События 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

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

События onPointerEnter и onPointerLeave всплывают с покинутого элемента к наведённому, вместо обычного процесса всплытия и не имеют фазы перехвата.

Тип Свойства
number pointerId
number width
number height
number pressure
number tangentialPressure
number tiltX
number tiltY
number twist
string pointerType
boolean isPrimary

События выбора

Сенсорные события

Тип Свойства
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
boolean getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

События UI

Тип Свойства
number detail
DOMAbstractView view

События колёсика мыши

Тип Свойства
number deltaMode
number deltaX
number deltaY
number deltaZ

События медиа-элементов

События изображений

События анимаций

Тип Свойства
string animationName
string pseudoElement
float elapsedTime

События переходов

Тип Свойства
string propertyName
string pseudoElement
float elapsedTime

Другие события

← Назад