From b375be53b97eea73ea1af4c655919b7ef440b21e Mon Sep 17 00:00:00 2001 From: Anton Babenko Date: Tue, 26 Feb 2019 23:39:27 +0200 Subject: [PATCH 1/4] synthetic event translated --- content/docs/reference-events.md | 182 +++++++++++++++---------------- 1 file changed, 91 insertions(+), 91 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 745c6a71e..e1b07b686 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -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`, це кроссбраузерна огортка над рідною подією браузеру. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця огортка допомагає спрацьовувати різним подіям однаково у всіх браузерах. -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`: ```javascript boolean bubbles @@ -31,19 +31,19 @@ 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. +> Починаючи з версії v0.14, повернення `false` з обробнику подій більше не зупиняє ефект спливання. Замість цього вам потрібно самотужки викликати `e.stopPropagation()` або `e.preventDefault()`. -### Event Pooling {#event-pooling} +### Пул подій {#event-pooling} -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` буде використаний знову, а також всі його властивості будуть очищені після виклику обробника події. +Це було зроблено з міркувань збереження продуктивності. +Саме цьому у нас немає можливості використовувати синтетичні події асинхронно. ```javascript function onClick(event) { - console.log(event); // => nullified object. + console.log(event); // => очищений об'єкт. console.log(event.type); // => "click" const eventType = event.type; // => "click" @@ -52,54 +52,54 @@ function onClick(event) { console.log(eventType); // => "click" }, 0); - // Won't work. this.state.clickEvent will only contain null values. + // Не спрацює. this.state.clickEvent зберігає тільки пусті значення. this.setState({clickEvent: event}); - // You can still export event properties. + // Ви все ще можете ексопртувати властивості події. this.setState({eventType: event.type}); } ``` -> 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()` на події. Тоді ця подія буде вилучена з пулу, в свою чергу це дозволить вашому коду утримувати посилання на цю подію. + +## Підтримувані події {#supported-events} + +React нормалізує події таким чином, що вони мають одинакові властивості в усіх браузерах. + +Обробники, які перелічені нижче, викликаються на фазі спливання. Для того щоб зареєструвати подію на фазі перехоплення (capture), просто додайте `Capture` до імені події; наприклад, замість використання `onClick` використовуйте `onClickCapture`, для того щоб опрацювати подію на стадії перехоплення. + +- [Події буфера обміну](#clipboard-events) +- [Композиційні події](#composition-events) +- [Події клавіатури](#keyboard-events) +- [Події фокусу](#focus-events) +- [Події форм](#form-events) +- [Події миші](#mouse-events) +- [Події курсору](#pointer-events) +- [Події вибору](#selection-events) +- [Сенсорні події](#touch-events) +- [Події UI](#ui-events) +- [Події коліщатка миші](#wheel-events) +- [Події медіа-елементів](#media-events) +- [Події зображень](#image-events) +- [Події анімацій](#animation-events) +- [Події переходів](#transition-events) +- [Інші події](#other-events) * * * -## Reference {#reference} +## Довідка {#reference} -### Clipboard Events {#clipboard-events} +### Події буфера обміну {#clipboard-events} -Event names: +Назви подій: ``` onCopy onCut onPaste ``` -Properties: +Властивості: ```javascript DOMDataTransfer clipboardData @@ -107,15 +107,15 @@ DOMDataTransfer clipboardData * * * -### Composition Events {#composition-events} +### Композиційні події {#composition-events} -Event names: +Назви подій: ``` onCompositionEnd onCompositionStart onCompositionUpdate ``` -Properties: +Властивості: ```javascript string data @@ -124,15 +124,15 @@ string data * * * -### Keyboard Events {#keyboard-events} +### Події клавіатури {#keyboard-events} -Event names: +Назви подій: ``` onKeyDown onKeyPress onKeyUp ``` -Properties: +Властивості: ```javascript boolean altKey @@ -149,21 +149,21 @@ 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 @@ -171,21 +171,21 @@ 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, відвідайте [Форми](/docs/forms.html). * * * -### Mouse Events {#mouse-events} +### Події миші {#mouse-events} -Event names: +Назви подій: ``` onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit @@ -193,9 +193,9 @@ 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 @@ -216,20 +216,20 @@ boolean shiftKey * * * -### Pointer Events {#pointer-events} +### Події курсору {#pointer-events} -Event names: +Назви подій: ``` 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](#mouse-events) з наступними властивостями: ```javascript number pointerId @@ -244,17 +244,17 @@ string pointerType boolean isPrimary ``` -A note on cross-browser support: +Примітка з приводу кроссбраузерності: -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, and Internet Explorer). React свідомо не поліфілізує підтримку в інших браузерах тому що це значно би збільшило розмір `react-dom`. -If your application requires pointer events, we recommend adding a third party pointer event polyfill. +Якщо вашому застосунку необхідно використовувати події курсору, то ми радимо встановити сторонній поліфіл. * * * -### Selection Events {#selection-events} +### Події вибору {#selection-events} -Event names: +Назви подій: ``` onSelect @@ -262,15 +262,15 @@ onSelect * * * -### Touch Events {#touch-events} +### Сенсорні події {#touch-events} -Event names: +Назви подій: ``` onTouchCancel onTouchEnd onTouchMove onTouchStart ``` -Properties: +Властивості: ```javascript boolean altKey @@ -285,15 +285,15 @@ DOMTouchList touches * * * -### UI Events {#ui-events} +### Події UI {#ui-events} -Event names: +Назви подій: ``` onScroll ``` -Properties: +Властивості: ```javascript number detail @@ -302,15 +302,15 @@ DOMAbstractView view * * * -### Wheel Events {#wheel-events} +### Події коліщатка миші {#wheel-events} -Event names: +Назви подій: ``` onWheel ``` -Properties: +Властивості: ```javascript number deltaMode @@ -321,9 +321,9 @@ number deltaZ * * * -### Media Events {#media-events} +### Події медіа-елементів {#media-events} -Event names: +Назви подій: ``` onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted @@ -334,9 +334,9 @@ onTimeUpdate onVolumeChange onWaiting * * * -### Image Events {#image-events} +### Події зображень {#image-events} -Event names: +Назви подій: ``` onLoad onError @@ -344,15 +344,15 @@ onLoad onError * * * -### Animation Events {#animation-events} +### Події анімацій {#animation-events} -Event names: +Назви подій: ``` onAnimationStart onAnimationEnd onAnimationIteration ``` -Properties: +Властивості: ```javascript string animationName @@ -362,15 +362,15 @@ float elapsedTime * * * -### Transition Events {#transition-events} +### Події переходів {#transition-events} -Event names: +Назви подій: ``` onTransitionEnd ``` -Properties: +Властивості: ```javascript string propertyName @@ -380,9 +380,9 @@ float elapsedTime * * * -### Other Events {#other-events} +### Інші події {#other-events} -Event names: +Назви подій: ``` onToggle From 2cceaa18f8678ba38f17f9ea6df6b761ac62cc49 Mon Sep 17 00:00:00 2001 From: Anton Babenko Date: Sat, 2 Mar 2019 10:43:32 +0200 Subject: [PATCH 2/4] typo fixes --- content/docs/reference-events.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index e1b07b686..6b3dfbb42 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -6,13 +6,13 @@ layout: docs category: Reference --- -У цьому довідковому матеріалі описана огортка `SyntheticEvent`, яка є частиною системи подій React. Дивіться інструкцію [Обробка подій](/docs/handling-events.html) для більш детальної інформації. +У цьому довідковому матеріалі описана обгортка `SyntheticEvent`, яка є частиною системи подій React. Дивіться інструкцію [Обробка подій](/docs/handling-events.html) для більш детальної інформації. ## Огляд {#overview} -Ваші обробники подій отримують примірник `SyntheticEvent`, це кроссбраузерна огортка над рідною подією браузеру. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця огортка допомагає спрацьовувати різним подіям однаково у всіх браузерах. +Ваші обробники подій отримують екземпляр `SyntheticEvent`, це кроcбраузерна обгортка над рідною подією браузеру. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах. -Якщо ви освідомили, що вам з якоїсь причини потрібно отримати рідну браузерну подію, то ви просто можете використати атрибут `nativeEvent`. Нижче перелік атрибутів об'єкта `SyntheticEvent`: +Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут `nativeEvent`. Нижче наведено перелік атрибутів об'єкта `SyntheticEvent`: ```javascript boolean bubbles @@ -33,11 +33,11 @@ string type > Примітка: > -> Починаючи з версії v0.14, повернення `false` з обробнику подій більше не зупиняє ефект спливання. Замість цього вам потрібно самотужки викликати `e.stopPropagation()` або `e.preventDefault()`. +> Починаючи з версії v0.14, повернення `false` з обробника подій більше не припиняє розповсюдження події. Замість цього вам потрібно самотужки викликати `e.stopPropagation()` або `e.preventDefault()`. ### Пул подій {#event-pooling} -Події `SyntheticEvent` містяться в пулі. Це означає, що об'єкт `SyntheticEvent` буде використаний знову, а також всі його властивості будуть очищені після виклику обробника події. +Події `SyntheticEvent` містяться в пулі. Це означає, що об'єкт `SyntheticEvent` буде використаний знову, а також всі його властивості будуть очищені після спрацювання функції зворотнього виклику події. Це було зроблено з міркувань збереження продуктивності. Саме цьому у нас немає можливості використовувати синтетичні події асинхронно. @@ -62,13 +62,13 @@ function onClick(event) { > Примітка: > -> Якщо ви всетаки хочете звернутися до властивостей події асинхронно, вам необхідно зробити виклик `event.persist()` на події. Тоді ця подія буде вилучена з пулу, в свою чергу це дозволить вашому коду утримувати посилання на цю подію. +> Якщо ви все-таки хочете звернутися до властивостей події асинхронно, вам необхідно зробити виклик `event.persist()` на події. Тоді ця подія буде вилучена з пулу, в свою чергу це дозволить вашому коду утримувати посилання на цю подію. ## Підтримувані події {#supported-events} React нормалізує події таким чином, що вони мають одинакові властивості в усіх браузерах. -Обробники, які перелічені нижче, викликаються на фазі спливання. Для того щоб зареєструвати подію на фазі перехоплення (capture), просто додайте `Capture` до імені події; наприклад, замість використання `onClick` використовуйте `onClickCapture`, для того щоб опрацювати подію на стадії перехоплення. +Обробники, які перелічені нижче, викликаються на фазі розповсюдження (bubbling). Для того щоб зареєструвати подію на фазі перехоплення (capture), просто додайте `Capture` до імені події; наприклад, замість використання `onClick` використовуйте `onClickCapture`, для того щоб опрацювати подію на стадії перехоплення. - [Події буфера обміну](#clipboard-events) - [Композиційні події](#composition-events) @@ -79,7 +79,7 @@ React нормалізує події таким чином, що вони ма - [Події курсору](#pointer-events) - [Події вибору](#selection-events) - [Сенсорні події](#touch-events) -- [Події UI](#ui-events) +- [Події інтерфейсу користувача](#ui-events) - [Події коліщатка миші](#wheel-events) - [Події медіа-елементів](#media-events) - [Події зображень](#image-events) @@ -161,7 +161,7 @@ number which onFocus onBlur ``` -Ці події працюють зі всіма React DOM елементами, а не тільки з елементами форм. +Ці події працюють зі всіма React- та DOM-елементами, а не тільки з елементами форм. Властивості: @@ -193,7 +193,7 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -Події `onMouseEnter` та `onMouseLeave` спливають з полишеного елементу до активного, замість звичайного процесу сплиття й не мають фази перехоплення. +Події `onMouseEnter` та `onMouseLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдженню події й не мають фази перехоплення. Властивості: @@ -225,7 +225,7 @@ onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -Події `onPointerEnter` та `onPointerLeave` спливають з полишеного елементу до активного, замість звичайного процесу сплиття й не мають фази перехоплення. +Події `onPointerEnter` та `onPointerLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдженню події й не мають фази перехоплення. Властивості: @@ -244,9 +244,9 @@ string pointerType boolean isPrimary ``` -Примітка з приводу кроссбраузерності: +Примітка з приводу кросбраузерності: -Події курсору ще не є підримуваними у всіх браузерах (на момент написання цієї статті підтримуються браузери: Chrome, Firefox, Edge, and Internet Explorer). React свідомо не поліфілізує підтримку в інших браузерах тому що це значно би збільшило розмір `react-dom`. +Події курсору ще не підтримуються всіма браузерами (на момент написання цієї статті підтримуються браузери: Chrome, Firefox, Edge, and Internet Explorer). React свідомо не поліфілізує підтримку в інших браузерах тому що це значно би збільшило розмір `react-dom`. Якщо вашому застосунку необхідно використовувати події курсору, то ми радимо встановити сторонній поліфіл. @@ -285,7 +285,7 @@ DOMTouchList touches * * * -### Події UI {#ui-events} +### Події інтерфейсу користувача {#ui-events} Назви подій: From 518d96f3f0ec67bb43a93f21ffe4b4071f81fbbd Mon Sep 17 00:00:00 2001 From: Anton Babenko Date: Sat, 2 Mar 2019 11:03:47 +0200 Subject: [PATCH 3/4] typo fixes --- content/docs/reference-events.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 6b3dfbb42..44a307e74 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -39,7 +39,7 @@ string type Події `SyntheticEvent` містяться в пулі. Це означає, що об'єкт `SyntheticEvent` буде використаний знову, а також всі його властивості будуть очищені після спрацювання функції зворотнього виклику події. Це було зроблено з міркувань збереження продуктивності. -Саме цьому у нас немає можливості використовувати синтетичні події асинхронно. +Таким чином, ви не можете отримати доступ до події асинхронним способом. ```javascript function onClick(event) { @@ -55,7 +55,7 @@ function onClick(event) { // Не спрацює. this.state.clickEvent зберігає тільки пусті значення. this.setState({clickEvent: event}); - // Ви все ще можете ексопртувати властивості події. + // Ви все ще можете експортувати властивості події. this.setState({eventType: event.type}); } ``` @@ -387,3 +387,4 @@ float elapsedTime ``` onToggle ``` +git push git@github.com:TheTonnio/uk.reactjs.org.git synthetic-event From a099752c673afc05c42235fa1ecb07e016338b5b Mon Sep 17 00:00:00 2001 From: Anton Babenko Date: Sun, 3 Mar 2019 17:49:45 +0200 Subject: [PATCH 4/4] typo fixes --- content/docs/reference-events.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 44a307e74..7b728c3fb 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -10,7 +10,7 @@ category: Reference ## Огляд {#overview} -Ваші обробники подій отримують екземпляр `SyntheticEvent`, це кроcбраузерна обгортка над рідною подією браузеру. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах. +Ваші обробники подій отримують екземпляр SyntheticEvent — кроcбраузерну обгортку над нативною подією браузера. Вона має такий же інтерфейс, як і браузерна подія, включаючи методи `stopPropagation()` та `preventDefault()`. Ця обгортка допомагає спрацьовувати різним подіям однаково у всіх браузерах. Якщо ви усвідомили, що вам з якоїсь причини потрібно отримати нативну браузерну подію, то ви просто можете використати атрибут `nativeEvent`. Нижче наведено перелік атрибутів об'єкта `SyntheticEvent`: @@ -149,7 +149,7 @@ boolean shiftKey number which ``` -Властивість `key` може приймати будь-які із задокументованих в [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) значень. * * * @@ -193,7 +193,7 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -Події `onMouseEnter` та `onMouseLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдженню події й не мають фази перехоплення. +Події `onMouseEnter` та `onMouseLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення. Властивості: @@ -225,11 +225,11 @@ onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -Події `onPointerEnter` та `onPointerLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдженню події й не мають фази перехоплення. +Події `onPointerEnter` та `onPointerLeave` розповсюджуються з попереднього елементу до активного, замість звичайного процесу розповсюдження події, а також не мають фази перехоплення. Властивості: -Як вказано в [W3 spec](https://www.w3.org/TR/pointerevents/), події курсору наслідують [Mouse Events](#mouse-events) з наступними властивостями: +Як вказано у [W3 spec](https://www.w3.org/TR/pointerevents/), події курсору наслідують [Mouse Events](#mouse-events) з наступними властивостями: ```javascript number pointerId @@ -387,4 +387,3 @@ float elapsedTime ``` onToggle ``` -git push git@github.com:TheTonnio/uk.reactjs.org.git synthetic-event