From d06e5c045b8146fd3e929938e734f9eaca327124 Mon Sep 17 00:00:00 2001
From: "translate-react-bot[bot]"
 <251169733+translate-react-bot[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 15:08:02 +0000
Subject: [PATCH 1/3] =?UTF-8?q?docs:=20translate=20`responding-to-events.m?=
 =?UTF-8?q?d`=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/learn/responding-to-events.md | 214 +++++++++++-----------
 1 file changed, 107 insertions(+), 107 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 17bd087ed2..d4689640a9 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: Responding to Events
+title: Обработка событий
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React позволяет добавлять *обработчики событий* в ваш JSX. Обработчики событий — это ваши собственные функции, которые будут вызваны в ответ на действия пользователя, такие как клики, наведение курсора, фокусировка на полях ввода и т. д.
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Различные способы написания обработчика событий
+* Как передать логику обработки событий из родительского компонента
+* Как события распространяются и как их остановить
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Чтобы добавить обработчик событий, сначала определите функцию, а затем [передайте её как проп](/learn/passing-props-to-a-component) соответствующему JSX-тегу. Например, вот кнопка, которая пока ничего не делает:
 
 <Sandpack>
 
@@ -34,11 +34,11 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+Вы можете заставить её выводить сообщение при нажатии, выполнив следующие три шага:
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. Объявите функцию с именем `handleClick` *внутри* вашего компонента `Button`.
+2. Реализуйте логику внутри этой функции (используйте `alert` для вывода сообщения).
+3. Добавьте `onClick={handleClick}` в JSX `<button>`.
 
 <Sandpack>
 
@@ -62,14 +62,14 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+Вы определили функцию `handleClick`, а затем [передали её как проп](/learn/passing-props-to-a-component) в `<button>`. `handleClick` является **обработчиком событий**. Функции-обработчики событий:
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* Обычно определяются *внутри* ваших компонентов.
+* Имеют имена, начинающиеся с `handle`, за которыми следует имя события.
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+По соглашению, принято называть обработчики событий `handle`, за которым следует имя события. Вы часто будете видеть `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` и так далее.
 
-Alternatively, you can define an event handler inline in the JSX:
+Альтернативно, вы можете определить обработчик событий прямо в JSX:
 
 ```jsx
 <button onClick={function handleClick() {
@@ -77,7 +77,7 @@ Alternatively, you can define an event handler inline in the JSX:
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+Или, более кратко, используя стрелочную функцию:
 
 ```jsx
 <button onClick={() => {
@@ -85,54 +85,54 @@ Or, more concisely, using an arrow function:
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Все эти стили эквивалентны. Встроенные обработчики событий удобны для коротких функций.
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+Функции, передаваемые в обработчики событий, должны быть переданы, а не вызваны. Например:
 
-| passing a function (correct)     | calling a function (incorrect)     |
+| Передача функции (правильно)     | Вызов функции (неправильно)     |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+Разница тонка. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это говорит React запомнить её и вызвать вашу функцию только тогда, когда пользователь нажмёт кнопку.
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+Во втором примере `()` в конце `handleClick()` вызывает функцию *немедленно* во время [рендеринга](/learn/render-and-commit), без каких-либо кликов. Это происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу.
 
-When you write code inline, the same pitfall presents itself in a different way:
+Когда вы пишете код прямо в JSX, та же ловушка проявляется по-другому:
 
-| passing a function (correct)            | calling a function (incorrect)    |
+| Передача функции (правильно)            | Вызов функции (неправильно)    |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Передача кода прямо в JSX таким образом не сработает при клике — она срабатывает при каждом рендеринге компонента:
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
+// Этот alert срабатывает при рендеринге компонента, а не при клике!
 <button onClick={alert('You clicked me!')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Если вы хотите определить обработчик событий прямо в JSX, оберните его в анонимную функцию, вот так:
 
 ```jsx
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+Вместо того чтобы выполнять код внутри при каждом рендеринге, это создаёт функцию, которая будет вызвана позже.
 
-In both cases, what you want to pass is a function:
+В обоих случаях вы хотите передать функцию:
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` передаёт функцию `handleClick`.
+* `<button onClick={() => alert('...')}>` передаёт функцию `() => alert('...')`.
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[Подробнее о стрелочных функциях.](https://javascript.info/arrow-functions-basics)
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Чтение пропсов в обработчиках событий {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам этого компонента. Вот кнопка, которая при нажатии выводит сообщение из своего пропа `message`:
 
 <Sandpack>
 
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+Это позволяет этим двум кнопкам выводить разные сообщения. Попробуйте изменить передаваемые им сообщения.
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Передача обработчиков событий как пропсов {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+Часто вы захотите, чтобы родительский компонент определял обработчик событий дочернего. Рассмотрим кнопки: в зависимости от того, где вы используете компонент `Button`, вы можете захотеть выполнить разную функцию — возможно, одна будет воспроизводить фильм, а другая загружать изображение.
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Для этого передайте проп, который компонент получает от родителя, как обработчик события, вот так:
 
 <Sandpack>
 
@@ -220,22 +220,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+Здесь компонент `Toolbar` рендерит `PlayButton` и `UploadButton`:
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- `PlayButton` передаёт `handlePlayClick` как проп `onClick` в `Button` внутри.
+- `UploadButton` передаёт `() => alert('Uploading!')` как проп `onClick` в `Button` внутри.
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+Наконец, ваш компонент `Button` принимает проп под названием `onClick`. Он напрямую передаёт этот проп встроенной браузерной кнопке `<button>` с помощью `onClick={onClick}`. Это говорит React вызвать переданную функцию при клике.
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+Если вы используете [систему дизайна](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), часто компоненты, такие как кнопки, содержат стилизацию, но не определяют поведение. Вместо этого компоненты, такие как `PlayButton` и `UploadButton`, передают обработчики событий вниз.
 
-### Naming event handler props {/*naming-event-handler-props*/}
+### Именование пропсов обработчиков событий {/*naming-event-handler-props*/}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Однако, когда вы создаёте свои собственные компоненты, вы можете называть их пропсы обработчиков событий как угодно.
 
-By convention, event handler props should start with `on`, followed by a capital letter.
+По соглашению, пропсы обработчиков событий должны начинаться с `on`, за которым следует заглавная буква.
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+Например, проп `onClick` компонента `Button` мог бы называться `onSmash`:
 
 <Sandpack>
 
@@ -268,9 +268,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+В этом примере `<button onClick={onSmash}>` показывает, что браузерная кнопка `<button>` (в нижнем регистре) по-прежнему нуждается в пропе с именем `onClick`, но имя пропса, полученное вашим пользовательским компонентом `Button`, зависит от вас!
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+Когда ваш компонент поддерживает несколько взаимодействий, вы можете называть пропсы обработчиков событий по концепциям, специфичным для приложения. Например, этот компонент `Toolbar` получает обработчики событий `onPlayMovie` и `onUploadImage`:
 
 <Sandpack>
 
@@ -312,19 +312,19 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+Обратите внимание, что компонент `App` не должен знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это деталь реализации `Toolbar`. Здесь `Toolbar` передаёт их как обработчики `onClick` своим `Button`, но позже он также может запускать их по сочетанию клавиш. Именование пропсов по взаимодействиям, специфичным для приложения, таким как `onPlayMovie`, даёт вам гибкость в изменении того, как они используются в дальнейшем.
   
 <Note>
 
-Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<div onClick={handleClick}>`. Using a real browser `<button>` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+Убедитесь, что вы используете соответствующие HTML-теги для ваших обработчиков событий. Например, для обработки кликов используйте [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), а не `<div onClick={handleClick}>`. Использование настоящей браузерной кнопки `<button>` включает встроенные браузерные поведения, такие как навигация с клавиатуры. Если вам не нравится стандартный браузерный стиль кнопки, и вы хотите, чтобы она выглядела больше как ссылка или другой элемент интерфейса, вы можете добиться этого с помощью CSS. [Узнайте больше о написании доступной разметки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
   
 </Note>
 
-## Event propagation {/*event-propagation*/}
+## Распространение событий {/*event-propagation*/}
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+Обработчики событий также будут перехватывать события от любых дочерних элементов вашего компонента. Мы говорим, что событие «всплывает» или «распространяется» вверх по дереву: оно начинается с места, где произошло событие, а затем движется вверх по дереву.
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+Этот `<div>` содержит две кнопки. И `<div>`, *и* каждая кнопка имеют свои собственные обработчики `onClick`. Как вы думаете, какие обработчики сработают при нажатии на кнопку?
 
 <Sandpack>
 
@@ -355,19 +355,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+Если вы нажмёте на любую кнопку, сначала сработает её обработчик `onClick`, а затем обработчик `onClick` родительского `<div>`. Таким образом, появятся два сообщения. Если вы нажмёте на сам `toolbar`, сработает только обработчик `onClick` родительского `<div>`.
 
 <Pitfall>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+Все события распространяются в React, кроме `onScroll`, который работает только на JSX-теге, к которому он прикреплён.
 
 </Pitfall>
 
-### Stopping propagation {/*stopping-propagation*/}
+### Остановка распространения {/*stopping-propagation*/}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+Обработчики событий получают **объект события** в качестве единственного аргумента. По соглашению, его обычно называют `e`, что означает «event» (событие). Вы можете использовать этот объект для чтения информации о событии.
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+Этот объект события также позволяет остановить распространение. Если вы хотите предотвратить распространение события на родительские компоненты, вам нужно вызвать `e.stopPropagation()`, как это делает компонент `Button`:
 
 <Sandpack>
 
@@ -409,43 +409,43 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+Когда вы нажимаете на кнопку:
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React вызывает обработчик `onClick`, переданный в `<button>`.
+2. Этот обработчик, определённый в `Button`, выполняет следующее:
+   * Вызывает `e.stopPropagation()`, предотвращая дальнейшее всплытие события.
+   * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
+3. Эта функция, определённая в компоненте `Toolbar`, отображает собственное оповещение кнопки.
+4. Поскольку распространение было остановлено, обработчик `onClick` родительского `<div>` *не* выполняется.
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+В результате вызова `e.stopPropagation()`, нажатие на кнопки теперь отображает только одно оповещение (от `<button>`), а не два (от `<button>` и родительского `<div>` toolbar). Нажатие на кнопку — это не то же самое, что нажатие на окружающий toolbar, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.
 
 <DeepDive>
 
-#### Capture phase events {/*capture-phase-events*/}
+#### События фазы захвата {/*capture-phase-events*/}
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+В редких случаях вам может понадобиться перехватывать все события на дочерних элементах, *даже если они остановили распространение*. Например, вы можете захотеть записывать каждый клик в аналитику, независимо от логики распространения. Вы можете сделать это, добавив `Capture` в конец имени события:
 
 ```js
-<div onClickCapture={() => { /* this runs first */ }}>
+<div onClickCapture={() => { /* это выполняется первым */ }}>
   <button onClick={e => e.stopPropagation()} />
   <button onClick={e => e.stopPropagation()} />
 </div>
 ```
 
-Each event propagates in three phases: 
+Каждое событие распространяется в три фазы:
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. Оно движется вниз, вызывая все обработчики `onClickCapture`.
+2. Выполняется обработчик `onClick` нажатого элемента.
+3. Оно движется вверх, вызывая все обработчики `onClick`.
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+События захвата полезны для такого кода, как маршрутизаторы или аналитика, но вы, вероятно, не будете использовать их в коде приложения.
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### Передача обработчиков как альтернатива распространению {/*passing-handlers-as-alternative-to-propagation*/}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+Обратите внимание, как этот обработчик клика выполняет строку кода, _а затем_ вызывает проп `onClick`, переданный родителем:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -460,13 +460,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+Вы можете добавить больше кода в этот обработчик перед вызовом родительского обработчика события `onClick`. Этот шаблон предоставляет *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, это не автоматическое. Но преимущество этого шаблона заключается в том, что вы можете четко проследить всю цепочку кода, которая выполняется в результате какого-либо события.
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+Если вы полагаетесь на распространение, и вам трудно отследить, какие обработчики выполняются и почему, попробуйте вместо этого использовать этот подход.
 
-### Preventing default behavior {/*preventing-default-behavior*/}
+### Предотвращение поведения по умолчанию {/*preventing-default-behavior*/}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+Некоторые события браузера имеют связанное с ними поведение по умолчанию. Например, событие отправки формы (`<form>` submit), которое происходит при нажатии на кнопку внутри неё, по умолчанию перезагрузит всю страницу:
 
 <Sandpack>
 
@@ -487,7 +487,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+Вы можете вызвать `e.preventDefault()` в объекте события, чтобы предотвратить это:
 
 <Sandpack>
 
@@ -511,28 +511,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+Не путайте `e.stopPropagation()` и `e.preventDefault()`. Оба полезны, но не связаны:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) останавливает срабатывание обработчиков событий, прикреплённых к вышестоящим тегам.
+* [`e.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) предотвращает стандартное поведение браузера для тех немногих событий, которые его имеют.
 
-## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+## Могут ли обработчики событий иметь побочные эффекты? {/*can-event-handlers-have-side-effects*/}
 
-Absolutely! Event handlers are the best place for side effects.
+Абсолютно! Обработчики событий — лучшее место для побочных эффектов.
 
-Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+В отличие от функций рендеринга, обработчикам событий не нужно быть [чистыми](/learn/keeping-components-pure), поэтому это отличное место для *изменения* чего-либо — например, изменения значения поля ввода в ответ на ввод текста или изменения списка в ответ на нажатие кнопки. Однако, чтобы изменить какую-либо информацию, вам сначала нужен способ её сохранить. В React это делается с помощью [состояния, памяти компонента.](/learn/state-a-components-memory) Вы узнаете всё об этом на следующей странице.
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* Вы можете обрабатывать события, передавая функцию в качестве пропа элементу, такому как `<button>`.
+* Обработчики событий должны быть переданы, **а не вызваны!** `onClick={handleClick}`, а не `onClick={handleClick()}`.
+* Вы можете определить функцию обработчика событий отдельно или встроено.
+* Обработчики событий определяются внутри компонента, поэтому они могут получать доступ к пропсам.
+* Вы можете объявить обработчик событий в родительском компоненте и передать его как проп дочернему.
+* Вы можете определить свои собственные пропсы обработчиков событий с именами, специфичными для приложения.
+* События распространяются вверх. Вызовите `e.stopPropagation()` в первом аргументе, чтобы предотвратить это.
+* События могут иметь нежелательное поведение браузера по умолчанию. Вызовите `e.preventDefault()`, чтобы предотвратить это.
+* Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению.
 
 </Recap>
 
@@ -540,9 +540,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-#### Fix an event handler {/*fix-an-event-handler*/}
+#### Исправьте обработчик события {/*fix-an-event-handler*/}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+Нажатие на эту кнопку должно переключать фон страницы между белым и чёрным. Однако при нажатии ничего не происходит. Исправьте проблему. (Не беспокойтесь о логике внутри `handleClick` — эта часть в порядке.)
 
 <Sandpack>
 
@@ -569,7 +569,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+Проблема в том, что `<button onClick={handleClick()}>` *вызывает* функцию `handleClick` во время рендеринга, а не *передаёт* её. Удаление вызова `()` так, чтобы получилось `<button onClick={handleClick}>`, исправляет проблему:
 
 <Sandpack>
 
@@ -594,7 +594,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+В качестве альтернативы вы можете обернуть вызов в другую функцию, например `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -621,11 +621,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Wire up the events {/*wire-up-the-events*/}
+#### Подключите события {/*wire-up-the-events*/}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+Этот компонент `ColorSwitch` отображает кнопку. Он должен менять цвет страницы. Подключите его к пропу обработчика события `onChangeColor`, который он получает от родительского компонента, чтобы нажатие на кнопку меняло цвет.
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+После этого обратите внимание, что нажатие на кнопку также увеличивает счётчик кликов страницы. Ваш коллега, написавший родительский компонент, настаивает, что `onChangeColor` не увеличивает никакие счётчики. Что ещё может происходить? Исправьте это так, чтобы нажатие на кнопку *только* меняло цвет и *не* увеличивало счётчик.
 
 <Sandpack>
 
@@ -679,9 +679,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+Сначала вам нужно добавить обработчик события, например `<button onClick={onChangeColor}>`.
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+Однако это создаёт проблему с увеличением счётчика. Если `onChangeColor` этого не делает, как настаивает ваш коллега, то проблема в том, что событие распространяется вверх, и какой-то обработчик выше делает это. Чтобы решить эту проблему, вам нужно остановить распространение. Но не забывайте, что вы всё равно должны вызвать `onChangeColor`.
 
 <Sandpack>
 
@@ -738,4 +738,4 @@ export default function App() {
 
 </Solution>
 
-</Challenges>
+</Challenges>
\ No newline at end of file

From bc4fdc830903e59e39190ee7ec23c2c446b6e23f Mon Sep 17 00:00:00 2001
From: "translate-react-bot[bot]"
 <251169733+translate-react-bot[bot]@users.noreply.github.com>
Date: Mon, 18 May 2026 16:17:49 +0000
Subject: [PATCH 2/3] =?UTF-8?q?docs:=20translate=20`responding-to-events.m?=
 =?UTF-8?q?d`=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/learn/responding-to-events.md | 107 +++++++++++-----------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index d4689640a9..2b67d2455d 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,10 +1,9 @@
 ---
 title: Обработка событий
 ---
-
 <Intro>
 
-React позволяет добавлять *обработчики событий* в ваш JSX. Обработчики событий — это ваши собственные функции, которые будут вызваны в ответ на действия пользователя, такие как клики, наведение курсора, фокусировка на полях ввода и т. д.
+React позволяет добавлять *обработчики событий* в ваш JSX. Обработчики событий — это ваши собственные функции, которые будут вызываться в ответ на такие взаимодействия, как клики, наведение курсора, фокусировка на полях ввода и так далее.
 
 </Intro>
 
@@ -18,7 +17,7 @@ React позволяет добавлять *обработчики событи
 
 ## Добавление обработчиков событий {/*adding-event-handlers*/}
 
-Чтобы добавить обработчик событий, сначала определите функцию, а затем [передайте её как проп](/learn/passing-props-to-a-component) соответствующему JSX-тегу. Например, вот кнопка, которая пока ничего не делает:
+Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем [передать её как пропс](/learn/passing-props-to-a-component) соответствующему JSX-тегу. Например, вот кнопка, которая пока ничего не делает:
 
 <Sandpack>
 
@@ -34,10 +33,10 @@ export default function Button() {
 
 </Sandpack>
 
-Вы можете заставить её выводить сообщение при нажатии, выполнив следующие три шага:
+Вы можете сделать так, чтобы она показывала сообщение при клике пользователя, выполнив следующие три шага:
 
 1. Объявите функцию с именем `handleClick` *внутри* вашего компонента `Button`.
-2. Реализуйте логику внутри этой функции (используйте `alert` для вывода сообщения).
+2. Реализуйте логику внутри этой функции (используйте `alert` для отображения сообщения).
 3. Добавьте `onClick={handleClick}` в JSX `<button>`.
 
 <Sandpack>
@@ -62,7 +61,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Вы определили функцию `handleClick`, а затем [передали её как проп](/learn/passing-props-to-a-component) в `<button>`. `handleClick` является **обработчиком событий**. Функции-обработчики событий:
+Вы определили функцию `handleClick`, а затем [передали её как пропс](/learn/passing-props-to-a-component) в `<button>`. `handleClick` — это **обработчик событий**. Функции-обработчики событий:
 
 * Обычно определяются *внутри* ваших компонентов.
 * Имеют имена, начинающиеся с `handle`, за которыми следует имя события.
@@ -89,24 +88,24 @@ button { margin-right: 10px; }
 
 <Pitfall>
 
-Функции, передаваемые в обработчики событий, должны быть переданы, а не вызваны. Например:
+Функции, передаваемые обработчикам событий, должны быть переданы, а не вызваны. Например:
 
-| Передача функции (правильно)     | Вызов функции (неправильно)     |
+| передача функции (правильно)     | вызов функции (неправильно)     |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-Разница тонка. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это говорит React запомнить её и вызвать вашу функцию только тогда, когда пользователь нажмёт кнопку.
+Разница тонка. В первом примере функция `handleClick` передается как обработчик события `onClick`. Это говорит React, чтобы он запомнил её и вызвал вашу функцию только тогда, когда пользователь нажмет кнопку.
 
-Во втором примере `()` в конце `handleClick()` вызывает функцию *немедленно* во время [рендеринга](/learn/render-and-commit), без каких-либо кликов. Это происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу.
+Во втором примере `()` в конце `handleClick()` запускает функцию *немедленно* во время [рендеринга](/learn/render-and-commit), без каких-либо кликов. Это происходит потому, что JavaScript внутри [JSX `{` и `}`](/learn/javascript-in-jsx-with-curly-braces) выполняется сразу.
 
-Когда вы пишете код прямо в JSX, та же ловушка проявляется по-другому:
+Когда вы пишете код прямо в JSX, та же самая ловушка проявляется по-другому:
 
-| Передача функции (правильно)            | Вызов функции (неправильно)    |
+| передача функции (правильно)            | вызов функции (неправильно)    |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Передача кода прямо в JSX таким образом не сработает при клике — она срабатывает при каждом рендеринге компонента:
+Передача такого встроенного кода не сработает при клике — он срабатывает при каждом рендеринге компонента:
 
 ```jsx
 // Этот alert срабатывает при рендеринге компонента, а не при клике!
@@ -119,12 +118,12 @@ button { margin-right: 10px; }
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Вместо того чтобы выполнять код внутри при каждом рендеринге, это создаёт функцию, которая будет вызвана позже.
+Вместо выполнения кода внутри при каждом рендеринге, это создает функцию, которая будет вызвана позже.
 
 В обоих случаях вы хотите передать функцию:
 
-* `<button onClick={handleClick}>` передаёт функцию `handleClick`.
-* `<button onClick={() => alert('...')}>` передаёт функцию `() => alert('...')`.
+* `<button onClick={handleClick}>` передает функцию `handleClick`.
+* `<button onClick={() => alert('...')}>` передает функцию `() => alert('...')`.
 
 [Подробнее о стрелочных функциях.](https://javascript.info/arrow-functions-basics)
 
@@ -132,7 +131,7 @@ button { margin-right: 10px; }
 
 ### Чтение пропсов в обработчиках событий {/*reading-props-in-event-handlers*/}
 
-Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам этого компонента. Вот кнопка, которая при нажатии выводит сообщение из своего пропа `message`:
+Поскольку обработчики событий объявлены внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, которая при нажатии показывает оповещение с её пропсом `message`:
 
 <Sandpack>
 
@@ -165,13 +164,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Это позволяет этим двум кнопкам выводить разные сообщения. Попробуйте изменить передаваемые им сообщения.
+Это позволяет этим двум кнопкам показывать разные сообщения. Попробуйте изменить передаваемые им сообщения.
 
 ### Передача обработчиков событий как пропсов {/*passing-event-handlers-as-props*/}
 
 Часто вы захотите, чтобы родительский компонент определял обработчик событий дочернего. Рассмотрим кнопки: в зависимости от того, где вы используете компонент `Button`, вы можете захотеть выполнить разную функцию — возможно, одна будет воспроизводить фильм, а другая загружать изображение.
 
-Для этого передайте проп, который компонент получает от родителя, как обработчик события, вот так:
+Для этого передайте пропс, который компонент получает от родителя, в качестве обработчика событий, вот так:
 
 <Sandpack>
 
@@ -222,20 +221,20 @@ button { margin-right: 10px; }
 
 Здесь компонент `Toolbar` рендерит `PlayButton` и `UploadButton`:
 
-- `PlayButton` передаёт `handlePlayClick` как проп `onClick` в `Button` внутри.
-- `UploadButton` передаёт `() => alert('Uploading!')` как проп `onClick` в `Button` внутри.
+- `PlayButton` передает `handlePlayClick` как пропс `onClick` в `Button` внутри.
+- `UploadButton` передает `() => alert('Uploading!')` как пропс `onClick` в `Button` внутри.
 
-Наконец, ваш компонент `Button` принимает проп под названием `onClick`. Он напрямую передаёт этот проп встроенной браузерной кнопке `<button>` с помощью `onClick={onClick}`. Это говорит React вызвать переданную функцию при клике.
+Наконец, ваш компонент `Button` принимает пропс под названием `onClick`. Он передает этот пропс напрямую встроенной браузерной кнопке `<button>` с помощью `onClick={onClick}`. Это говорит React вызвать переданную функцию при клике.
 
 Если вы используете [систему дизайна](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), часто компоненты, такие как кнопки, содержат стилизацию, но не определяют поведение. Вместо этого компоненты, такие как `PlayButton` и `UploadButton`, передают обработчики событий вниз.
 
 ### Именование пропсов обработчиков событий {/*naming-event-handler-props*/}
 
-Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена событий браузера](/reference/react-dom/components/common#common-props), такие как `onClick`. Однако, когда вы создаёте свои собственные компоненты, вы можете называть их пропсы обработчиков событий как угодно.
+Встроенные компоненты, такие как `<button>` и `<div>`, поддерживают только [имена браузерных событий](/reference/react-dom/components/common#common-props), такие как `onClick`. Однако, когда вы создаете свои собственные компоненты, вы можете называть их пропсы обработчиков событий как угодно.
 
 По соглашению, пропсы обработчиков событий должны начинаться с `on`, за которым следует заглавная буква.
 
-Например, проп `onClick` компонента `Button` мог бы называться `onSmash`:
+Например, пропс `onClick` компонента `Button` мог бы называться `onSmash`:
 
 <Sandpack>
 
@@ -268,7 +267,7 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-В этом примере `<button onClick={onSmash}>` показывает, что браузерная кнопка `<button>` (в нижнем регистре) по-прежнему нуждается в пропе с именем `onClick`, но имя пропса, полученное вашим пользовательским компонентом `Button`, зависит от вас!
+В этом примере `<button onClick={onSmash}>` показывает, что браузерная кнопка `<button>` (в нижнем регистре) по-прежнему нуждается в пропсе с именем `onClick`, но имя пропса, полученное вашим пользовательским компонентом `Button`, остается на ваше усмотрение!
 
 Когда ваш компонент поддерживает несколько взаимодействий, вы можете называть пропсы обработчиков событий по концепциям, специфичным для приложения. Например, этот компонент `Toolbar` получает обработчики событий `onPlayMovie` и `onUploadImage`:
 
@@ -312,19 +311,19 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Обратите внимание, что компонент `App` не должен знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это деталь реализации `Toolbar`. Здесь `Toolbar` передаёт их как обработчики `onClick` своим `Button`, но позже он также может запускать их по сочетанию клавиш. Именование пропсов по взаимодействиям, специфичным для приложения, таким как `onPlayMovie`, даёт вам гибкость в изменении того, как они используются в дальнейшем.
+Обратите внимание, что компонент `App` не должен знать, *что* `Toolbar` будет делать с `onPlayMovie` или `onUploadImage`. Это деталь реализации `Toolbar`. Здесь `Toolbar` передает их как обработчики `onClick` своим `Button`s, но позже он также может вызывать их по сочетанию клавиш. Именование пропсов по взаимодействиям, специфичным для приложения, таким как `onPlayMovie`, дает вам гибкость в изменении того, как они используются в дальнейшем.
   
 <Note>
 
-Убедитесь, что вы используете соответствующие HTML-теги для ваших обработчиков событий. Например, для обработки кликов используйте [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), а не `<div onClick={handleClick}>`. Использование настоящей браузерной кнопки `<button>` включает встроенные браузерные поведения, такие как навигация с клавиатуры. Если вам не нравится стандартный браузерный стиль кнопки, и вы хотите, чтобы она выглядела больше как ссылка или другой элемент интерфейса, вы можете добиться этого с помощью CSS. [Узнайте больше о написании доступной разметки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+Убедитесь, что вы используете соответствующие HTML-теги для ваших обработчиков событий. Например, для обработки кликов используйте [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), а не `<div onClick={handleClick}>`. Использование настоящей браузерной кнопки `<button>` включает встроенное поведение браузера, такое как навигация с клавиатуры. Если вам не нравится стандартное оформление кнопки браузера, и вы хотите, чтобы она выглядела больше как ссылка или другой элемент интерфейса, вы можете добиться этого с помощью CSS. [Узнайте больше о написании доступной разметки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
   
 </Note>
 
 ## Распространение событий {/*event-propagation*/}
 
-Обработчики событий также будут перехватывать события от любых дочерних элементов вашего компонента. Мы говорим, что событие «всплывает» или «распространяется» вверх по дереву: оно начинается с места, где произошло событие, а затем движется вверх по дереву.
+Обработчики событий также будут перехватывать события от любых дочерних элементов, которые может иметь ваш компонент. Мы говорим, что событие "всплывает" или "распространяется" вверх по дереву: оно начинается с места, где произошло событие, а затем идет вверх по дереву.
 
-Этот `<div>` содержит две кнопки. И `<div>`, *и* каждая кнопка имеют свои собственные обработчики `onClick`. Как вы думаете, какие обработчики сработают при нажатии на кнопку?
+Этот `<div>` содержит две кнопки. И `<div>`, *и* каждая кнопка имеют свои собственные обработчики `onClick`. Какие обработчики, по вашему мнению, сработают при нажатии на кнопку?
 
 <Sandpack>
 
@@ -355,17 +354,17 @@ button { margin: 5px; }
 
 </Sandpack>
 
-Если вы нажмёте на любую кнопку, сначала сработает её обработчик `onClick`, а затем обработчик `onClick` родительского `<div>`. Таким образом, появятся два сообщения. Если вы нажмёте на сам `toolbar`, сработает только обработчик `onClick` родительского `<div>`.
+Если вы нажмете на любую кнопку, сначала сработает её `onClick`, а затем `onClick` родительского `<div>`. Таким образом, появятся два сообщения. Если вы нажмете на саму панель инструментов, сработает только `onClick` родительского `<div>`.
 
 <Pitfall>
 
-Все события распространяются в React, кроме `onScroll`, который работает только на JSX-теге, к которому он прикреплён.
+Все события распространяются в React, кроме `onScroll`, который работает только на JSX-теге, к которому он прикреплен.
 
 </Pitfall>
 
 ### Остановка распространения {/*stopping-propagation*/}
 
-Обработчики событий получают **объект события** в качестве единственного аргумента. По соглашению, его обычно называют `e`, что означает «event» (событие). Вы можете использовать этот объект для чтения информации о событии.
+Обработчики событий получают **объект события** в качестве единственного аргумента. По соглашению, он обычно называется `e`, что означает "event" (событие). Вы можете использовать этот объект для чтения информации о событии.
 
 Этот объект события также позволяет остановить распространение. Если вы хотите предотвратить распространение события на родительские компоненты, вам нужно вызвать `e.stopPropagation()`, как это делает компонент `Button`:
 
@@ -412,19 +411,19 @@ button { margin: 5px; }
 Когда вы нажимаете на кнопку:
 
 1. React вызывает обработчик `onClick`, переданный в `<button>`.
-2. Этот обработчик, определённый в `Button`, выполняет следующее:
+2. Этот обработчик, определенный в `Button`, делает следующее:
    * Вызывает `e.stopPropagation()`, предотвращая дальнейшее всплытие события.
-   * Вызывает функцию `onClick`, которая является пропом, переданным из компонента `Toolbar`.
-3. Эта функция, определённая в компоненте `Toolbar`, отображает собственное оповещение кнопки.
+   * Вызывает функцию `onClick`, которая является пропсом, переданным из компонента `Toolbar`.
+3. Эта функция, определенная в компоненте `Toolbar`, отображает собственное оповещение кнопки.
 4. Поскольку распространение было остановлено, обработчик `onClick` родительского `<div>` *не* выполняется.
 
-В результате вызова `e.stopPropagation()`, нажатие на кнопки теперь отображает только одно оповещение (от `<button>`), а не два (от `<button>` и родительского `<div>` toolbar). Нажатие на кнопку — это не то же самое, что нажатие на окружающий toolbar, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.
+В результате вызова `e.stopPropagation()`, нажатие на кнопки теперь показывает только одно оповещение (от `<button>`), а не два (от `<button>` и родительского `<div>` панели инструментов). Нажатие на кнопку — это не то же самое, что нажатие на окружающую панель инструментов, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.
 
 <DeepDive>
 
 #### События фазы захвата {/*capture-phase-events*/}
 
-В редких случаях вам может понадобиться перехватывать все события на дочерних элементах, *даже если они остановили распространение*. Например, вы можете захотеть записывать каждый клик в аналитику, независимо от логики распространения. Вы можете сделать это, добавив `Capture` в конец имени события:
+В редких случаях вам может понадобиться перехватывать все события на дочерних элементах, *даже если они остановили распространение*. Например, вы можете захотеть регистрировать каждый клик для аналитики, независимо от логики распространения. Вы можете сделать это, добавив `Capture` в конец имени события:
 
 ```js
 <div onClickCapture={() => { /* это выполняется первым */ }}>
@@ -445,7 +444,7 @@ button { margin: 5px; }
 
 ### Передача обработчиков как альтернатива распространению {/*passing-handlers-as-alternative-to-propagation*/}
 
-Обратите внимание, как этот обработчик клика выполняет строку кода, _а затем_ вызывает проп `onClick`, переданный родителем:
+Обратите внимание, как этот обработчик клика выполняет строку кода, _а затем_ вызывает пропс `onClick`, переданный родителем:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -460,13 +459,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-Вы можете добавить больше кода в этот обработчик перед вызовом родительского обработчика события `onClick`. Этот шаблон предоставляет *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, это не автоматическое. Но преимущество этого шаблона заключается в том, что вы можете четко проследить всю цепочку кода, которая выполняется в результате какого-либо события.
+Вы можете добавить больше кода в этот обработчик перед вызовом родительского обработчика события `onClick`. Этот шаблон предоставляет *альтернативу* распространению. Он позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, это не автоматическое. Но преимущество этого шаблона в том, что вы можете четко проследить всю цепочку кода, которая выполняется в результате какого-либо события.
 
 Если вы полагаетесь на распространение, и вам трудно отследить, какие обработчики выполняются и почему, попробуйте вместо этого использовать этот подход.
 
 ### Предотвращение поведения по умолчанию {/*preventing-default-behavior*/}
 
-Некоторые события браузера имеют связанное с ними поведение по умолчанию. Например, событие отправки формы (`<form>` submit), которое происходит при нажатии на кнопку внутри неё, по умолчанию перезагрузит всю страницу:
+Некоторые браузерные события имеют связанное с ними поведение по умолчанию. Например, событие отправки `<form>`, которое происходит при нажатии на кнопку внутри него, по умолчанию перезагрузит всю страницу:
 
 <Sandpack>
 
@@ -513,22 +512,22 @@ button { margin-left: 5px; }
 
 Не путайте `e.stopPropagation()` и `e.preventDefault()`. Оба полезны, но не связаны:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) останавливает срабатывание обработчиков событий, прикреплённых к вышестоящим тегам.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) останавливает срабатывание обработчиков событий, прикрепленных к тегам выше.
 * [`e.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) предотвращает стандартное поведение браузера для тех немногих событий, которые его имеют.
 
 ## Могут ли обработчики событий иметь побочные эффекты? {/*can-event-handlers-have-side-effects*/}
 
 Абсолютно! Обработчики событий — лучшее место для побочных эффектов.
 
-В отличие от функций рендеринга, обработчикам событий не нужно быть [чистыми](/learn/keeping-components-pure), поэтому это отличное место для *изменения* чего-либо — например, изменения значения поля ввода в ответ на ввод текста или изменения списка в ответ на нажатие кнопки. Однако, чтобы изменить какую-либо информацию, вам сначала нужен способ её сохранить. В React это делается с помощью [состояния, памяти компонента.](/learn/state-a-components-memory) Вы узнаете всё об этом на следующей странице.
+В отличие от функций рендеринга, обработчикам событий не нужно быть [чистыми](/learn/keeping-components-pure), поэтому это отличное место для *изменения* чего-либо — например, изменения значения поля ввода в ответ на ввод текста или изменения списка в ответ на нажатие кнопки. Однако, чтобы изменить некоторую информацию, вам сначала нужен способ её сохранить. В React это делается с помощью [состояния, памяти компонента.](/learn/state-a-components-memory) Вы узнаете всё об этом на следующей странице.
 
 <Recap>
 
-* Вы можете обрабатывать события, передавая функцию в качестве пропа элементу, такому как `<button>`.
+* Вы можете обрабатывать события, передавая функцию как пропс элементу, например `<button>`.
 * Обработчики событий должны быть переданы, **а не вызваны!** `onClick={handleClick}`, а не `onClick={handleClick()}`.
-* Вы можете определить функцию обработчика событий отдельно или встроено.
+* Вы можете определить функцию обработчика событий отдельно или прямо в JSX.
 * Обработчики событий определяются внутри компонента, поэтому они могут получать доступ к пропсам.
-* Вы можете объявить обработчик событий в родительском компоненте и передать его как проп дочернему.
+* Вы можете объявить обработчик событий в родительском компоненте и передать его как пропс дочернему.
 * Вы можете определить свои собственные пропсы обработчиков событий с именами, специфичными для приложения.
 * События распространяются вверх. Вызовите `e.stopPropagation()` в первом аргументе, чтобы предотвратить это.
 * События могут иметь нежелательное поведение браузера по умолчанию. Вызовите `e.preventDefault()`, чтобы предотвратить это.
@@ -540,9 +539,9 @@ button { margin-left: 5px; }
 
 <Challenges>
 
-#### Исправьте обработчик события {/*fix-an-event-handler*/}
+#### Исправьте обработчик событий {/*fix-an-event-handler*/}
 
-Нажатие на эту кнопку должно переключать фон страницы между белым и чёрным. Однако при нажатии ничего не происходит. Исправьте проблему. (Не беспокойтесь о логике внутри `handleClick` — эта часть в порядке.)
+Нажатие на эту кнопку должно переключать фон страницы между белым и черным. Однако при нажатии ничего не происходит. Исправьте проблему. (Не беспокойтесь о логике внутри `handleClick` — эта часть в порядке.)
 
 <Sandpack>
 
@@ -569,7 +568,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-Проблема в том, что `<button onClick={handleClick()}>` *вызывает* функцию `handleClick` во время рендеринга, а не *передаёт* её. Удаление вызова `()` так, чтобы получилось `<button onClick={handleClick}>`, исправляет проблему:
+Проблема в том, что `<button onClick={handleClick()}>` _вызывает_ функцию `handleClick` во время рендеринга вместо того, чтобы _передавать_ её. Удаление вызова `()` так, чтобы получилось `<button onClick={handleClick}>`, исправляет проблему:
 
 <Sandpack>
 
@@ -594,7 +593,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-В качестве альтернативы вы можете обернуть вызов в другую функцию, например `<button onClick={() => handleClick()}>`:
+Альтернативно, вы можете обернуть вызов в другую функцию, например `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -621,11 +620,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Подключите события {/*wire-up-the-events*/}
+#### Свяжите события {/*wire-up-the-events*/}
 
-Этот компонент `ColorSwitch` отображает кнопку. Он должен менять цвет страницы. Подключите его к пропу обработчика события `onChangeColor`, который он получает от родительского компонента, чтобы нажатие на кнопку меняло цвет.
+Этот компонент `ColorSwitch` рендерит кнопку. Он должен менять цвет страницы. Свяжите его с пропсом обработчика события `onChangeColor`, который он получает от родителя, чтобы нажатие на кнопку меняло цвет.
 
-После этого обратите внимание, что нажатие на кнопку также увеличивает счётчик кликов страницы. Ваш коллега, написавший родительский компонент, настаивает, что `onChangeColor` не увеличивает никакие счётчики. Что ещё может происходить? Исправьте это так, чтобы нажатие на кнопку *только* меняло цвет и *не* увеличивало счётчик.
+После этого обратите внимание, что нажатие на кнопку также увеличивает счетчик кликов страницы. Ваш коллега, написавший родительский компонент, настаивает, что `onChangeColor` не увеличивает никакие счетчики. Что еще может происходить? Исправьте это так, чтобы нажатие на кнопку *только* меняло цвет и *не* увеличивало счетчик.
 
 <Sandpack>
 
@@ -679,9 +678,9 @@ export default function App() {
 
 <Solution>
 
-Сначала вам нужно добавить обработчик события, например `<button onClick={onChangeColor}>`.
+Сначала вам нужно добавить обработчик событий, например `<button onClick={onChangeColor}>`.
 
-Однако это создаёт проблему с увеличением счётчика. Если `onChangeColor` этого не делает, как настаивает ваш коллега, то проблема в том, что событие распространяется вверх, и какой-то обработчик выше делает это. Чтобы решить эту проблему, вам нужно остановить распространение. Но не забывайте, что вы всё равно должны вызвать `onChangeColor`.
+Однако это создает проблему с увеличением счетчика. Если `onChangeColor` этого не делает, как утверждает ваш коллега, то проблема в том, что событие распространяется вверх, и какой-то обработчик выше делает это. Чтобы решить эту проблему, вам нужно остановить распространение. Но не забывайте, что вы все равно должны вызвать `onChangeColor`.
 
 <Sandpack>
 

From 4d1e9086d600dae65fafee90734761178da58fbb Mon Sep 17 00:00:00 2001
From: nivaldo <badivia.f@gmail.com>
Date: Mon, 18 May 2026 14:55:47 -0300
Subject: [PATCH 3/3] chore: keep frontmatter title as-is

---
 src/content/learn/responding-to-events.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 2b67d2455d..0fe6bd4293 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,6 +1,7 @@
 ---
-title: Обработка событий
+title: Responding to Events
 ---
+
 <Intro>
 
 React позволяет добавлять *обработчики событий* в ваш JSX. Обработчики событий — это ваши собственные функции, которые будут вызываться в ответ на такие взаимодействия, как клики, наведение курсора, фокусировка на полях ввода и так далее.
@@ -737,4 +738,4 @@ export default function App() {
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>