Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate "SyntheticEvent" #122

Merged
merged 29 commits into from
Feb 25, 2019
Merged
Changes from 18 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
756ca9a
Translate "SyntheticEvent"
dmtrKovalenko Feb 13, 2019
76019fe
Make text simplier
dmtrKovalenko Feb 13, 2019
021f7c6
Fix ё letters
dmtrKovalenko Feb 14, 2019
5926c48
Update content/docs/reference-events.md
lex111 Feb 14, 2019
68673e6
Update content/docs/reference-events.md
angryermine Feb 14, 2019
9fa7bd5
Update content/docs/reference-events.md
angryermine Feb 14, 2019
63f292e
Update content/docs/reference-events.md
angryermine Feb 14, 2019
23ddc6f
Update content/docs/reference-events.md
angryermine Feb 14, 2019
00c0466
Update content/docs/reference-events.md
angryermine Feb 14, 2019
7ff16f1
Update content/docs/reference-events.md
angryermine Feb 14, 2019
91fc388
Update content/docs/reference-events.md
angryermine Feb 14, 2019
1a69ea3
Update content/docs/reference-events.md
angryermine Feb 14, 2019
005b348
Update content/docs/reference-events.md
lex111 Feb 14, 2019
27003fb
Update content/docs/reference-events.md
lex111 Feb 14, 2019
cca7599
Update content/docs/reference-events.md
lex111 Feb 14, 2019
dceef94
Update content/docs/reference-events.md
angryermine Feb 15, 2019
65a99e9
Update content/docs/reference-events.md
ntishkevich Feb 15, 2019
8c9b237
Translate event names
dmtrKovalenko Feb 21, 2019
653fde9
Update content/docs/reference-events.md
lex111 Feb 22, 2019
f1af3c1
Update content/docs/reference-events.md
lex111 Feb 22, 2019
d9df449
Update content/docs/reference-events.md
another-guy Feb 23, 2019
df96c0e
Update content/docs/reference-events.md
another-guy Feb 23, 2019
5be7fc0
Update content/docs/reference-events.md
another-guy Feb 23, 2019
802e74c
Update content/docs/reference-events.md
another-guy Feb 23, 2019
710e536
Update content/docs/reference-events.md
another-guy Feb 24, 2019
403286c
Update content/docs/reference-events.md
another-guy Feb 24, 2019
e64b8cd
Update content/docs/reference-events.md
another-guy Feb 24, 2019
49f631e
Update content/docs/reference-events.md
another-guy Feb 24, 2019
c34d134
Fix plural form of "Название"
dmtrKovalenko Feb 24, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 84 additions & 84 deletions content/docs/reference-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ layout: docs
category: Reference
---

This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more.
В этом справочном руководстве описана обёртка `SyntheticEvent`, которая является частью системы событий React. Смотрите руководство [Обработка событий](/docs/handling-events.html) для детальной информации.

## Overview {#overview}
## Беглый обзор {#overview}

Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers.
Ваши обработчики событий получают экземпляр `SyntheticEvent`, это кроссбраузерная обёртка над нативным экземпляром события. У нeё такой же интерфейс, как и у нативного события, включая методы `stopPropagation()` и `preventDefault()`, но такие события работают одинаково во всех браузерах.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes:
Если всё-таки вам нужно получить нативное браузерное событие, обратитесь к атрибуту `nativeEvent`. Помимо него каждый объект `SyntheticEvent` содержит следующие атрибуты:
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

```javascript
boolean bubbles
Expand All @@ -31,15 +31,15 @@ number timeStamp
string type
```

> Note:
> Примечание:
>
> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate.
> Начиная с версии 0.14, возврат `false` из обработчика событий больше не останавливает всплытие. Вместо этого, `e.stopPropagation()` или `e.preventDefault()` нужно вызывать вручную, если это необходимо.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

### Event Pooling {#event-pooling}
### Делегирование событий {#event-pooling}
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked.
This is for performance reasons.
As such, you cannot access the event in an asynchronous way.
`SyntheticEvent` является делегированным. Это означает, что объект `SyntheticEvent` будет переиспользован, а все свойства будут обнулены после окончания выполнения обработчика.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved
Это необходимо из соображений производительности.
Именно поэтому нельзя использовать синтетические события асинхронно.

```javascript
function onClick(event) {
Expand All @@ -60,62 +60,62 @@ function onClick(event) {
}
```

> Note:
> Примечание:
>
> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

## Supported Events {#supported-events}

React normalizes events so that they have consistent properties across different browsers.

The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.

- [Clipboard Events](#clipboard-events)
- [Composition Events](#composition-events)
- [Keyboard Events](#keyboard-events)
- [Focus Events](#focus-events)
- [Form Events](#form-events)
- [Mouse Events](#mouse-events)
- [Pointer Events](#pointer-events)
- [Selection Events](#selection-events)
- [Touch Events](#touch-events)
- [UI Events](#ui-events)
- [Wheel Events](#wheel-events)
- [Media Events](#media-events)
- [Image Events](#image-events)
- [Animation Events](#animation-events)
- [Transition Events](#transition-events)
- [Other Events](#other-events)
> Если вы всё же хотите обратиться к полям события асинхронно, вам нужно вызвать `event.persist()` на событии. Это отключит делегирование этого обьекта и позволит обращаться к нему в дальнейшем.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

## Поддерживаемые события {#supported-events}

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

Обработчики ниже вызываются на фазе всплытия (bubbling). А чтобы зарегистрировать событие на фазе перехвата (capture), просто добавьте `Capture` к имени события; например, вместо использования `onClick` используйте `onClickCapture`, чтобы обработать событие на фазе перехвата.

- [События буфера обмена](#clipboard-events)
- [Композиционные события](#composition-events)
lex111 marked this conversation as resolved.
Show resolved Hide resolved
- [События клавиатуры](#keyboard-events)
- [События фокуса](#focus-events)
- [События формы](#form-events)
- [События мыши](#mouse-events)
- [События курсора](#pointer-events)
- [События выбора](#selection-events)
- [Сенсорные события](#touch-events)
- [События UI](#ui-events)
- [Событий колеса мыши](#wheel-events)
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved
- [События медиа-элементов](#media-events)
- [События изображений](#image-events)
- [События анимаций](#animation-events)
- [События переходов](#transition-events)
- [Другие события](#other-events)

* * *

## Reference {#reference}

### Clipboard Events {#clipboard-events}
### События буфера обмена {#clipboard-events}

Event names:
Название событий:
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

```
onCopy onCut onPaste
```

Properties:
Свойства:

```javascript
DOMDataTransfer clipboardData
```

* * *

### Composition Events {#composition-events}
### Композиционные события {#composition-events}

Event names:
Название событий:

```
onCompositionEnd onCompositionStart onCompositionUpdate
```

Properties:
Свойства:

```javascript
string data
Expand All @@ -124,15 +124,15 @@ string data

* * *

### Keyboard Events {#keyboard-events}
### События клавиатуры {#keyboard-events}

Event names:
Название событий:

```
onKeyDown onKeyPress onKeyUp
```

Properties:
Свойства:

```javascript
boolean altKey
Expand All @@ -149,53 +149,53 @@ boolean shiftKey
number which
```

The `key` property can take any of the values documented in the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values).
Свойство `key` может содержать любое из документированных в [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values) значений.

* * *

### Focus Events {#focus-events}
### События фокуса {#focus-events}

Event names:
Название событий:

```
onFocus onBlur
```

These focus events work on all elements in the React DOM, not just form elements.
Эти события фокуса работают не только на элементах формы, но и на всех остальных элементах в React DOM.

Properties:
Свойства:

```javascript
DOMEventTarget relatedTarget
```

* * *

### Form Events {#form-events}
### События формы {#form-events}

Event names:
Название событий:

```
onChange onInput onInvalid onSubmit
```

For more information about the onChange event, see [Forms](/docs/forms.html).
Больше информации о событии onChange тут — [Forms](/docs/forms.html).

* * *

### Mouse Events {#mouse-events}
### События мыши {#mouse-events}

Event names:
Название событий:

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

The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
События `onMouseEnter` и `onMouseLeave` всплывают с покинутого элемента к наведённому, вместо обычного процесса всплытия и не имеют фазы перехвата.

Properties:
Свойства:

```javascript
boolean altKey
Expand All @@ -216,20 +216,20 @@ boolean shiftKey

* * *

### Pointer Events {#pointer-events}
### События курсора {#pointer-events}

Event names:
Название собыий:
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

```
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
```

The `onPointerEnter` and `onPointerLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
События `onPointerEnter` и `onPointerLeave` всплывают с покинутого элемента к наведённому, вместо обычного процесса всплытия и не имеют фазы перехвата.

Properties:
Свойства:

As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events) with the following properties:
По определению из [W3 spec](https://www.w3.org/TR/pointerevents/), события курсора наследуют [События мыши](#mouse-events) со следующими свойствами:

```javascript
number pointerId
Expand All @@ -244,33 +244,33 @@ string pointerType
boolean isPrimary
```

A note on cross-browser support:
На заметку по поводу кросс-браузерности:
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`.
События указателя ещё не поддерживаются во всех браузерах (на момент написания этой статьи поддерживают браузеры: Chrome, Firefox, Edge, и Internet Explorer). React сознательно не полифилит поддержку в других браузерах потому что это значительно бы увеличило размер `react-dom`.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

If your application requires pointer events, we recommend adding a third party pointer event polyfill.
Если вашему приложению нужны события указателя, мы рекомендуем использовать сторонний полифилл.
dmtrKovalenko marked this conversation as resolved.
Show resolved Hide resolved

* * *

### Selection Events {#selection-events}
### События выбора {#selection-events}

Event names:
Название событий:

```
onSelect
```

* * *

### Touch Events {#touch-events}
### Сенсорные события {#touch-events}

Event names:
Название событий:

```
onTouchCancel onTouchEnd onTouchMove onTouchStart
```

Properties:
Свойства:

```javascript
boolean altKey
Expand All @@ -285,9 +285,9 @@ DOMTouchList touches

* * *

### UI Events {#ui-events}
### События UI {#ui-events}

Event names:
Название событий:

```
onScroll
Expand All @@ -302,15 +302,15 @@ DOMAbstractView view

* * *

### Wheel Events {#wheel-events}
### Событий колеса мыши {#wheel-events}

Event names:

```
onWheel
```

Properties:
Свойства:

```javascript
number deltaMode
Expand All @@ -323,7 +323,7 @@ number deltaZ

### Media Events {#media-events}

Event names:
Название событий:

```
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
Expand All @@ -334,25 +334,25 @@ onTimeUpdate onVolumeChange onWaiting

* * *

### Image Events {#image-events}
### События изображений {#image-events}

Event names:
Название событий:

```
onLoad onError
```

* * *

### Animation Events {#animation-events}
### События анимацй {#animation-events}

Event names:
Название событий:

```
onAnimationStart onAnimationEnd onAnimationIteration
```

Properties:
Свойства:

```javascript
string animationName
Expand All @@ -362,15 +362,15 @@ float elapsedTime

* * *

### Transition Events {#transition-events}
### События переходов {#transition-events}

Event names:
Название событий:

```
onTransitionEnd
```

Properties:
Свойства:

```javascript
string propertyName
Expand All @@ -380,9 +380,9 @@ float elapsedTime

* * *

### Other Events {#other-events}
### Другие события {#other-events}

Event names:
Название событий:

```
onToggle
Expand Down