1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>На первый взгляд может показаться, что в React используются обычные браузерные события, но это не так. React самостоятельно перехватывает все события, возникающие в DOM, и транслирует их во внутреннюю систему.</p>
1
<p>На первый взгляд может показаться, что в React используются обычные браузерные события, но это не так. React самостоятельно перехватывает все события, возникающие в DOM, и транслирует их во внутреннюю систему.</p>
2
<p>В любой обработчик события при вызове передаётся объект типа SyntheticEvent, кросс браузерный "враппер" (обёртка) над нативным объектом события. С точки зрения интерфейса он не отличается от нативного, кроме того, что работает одинаково во всех браузерах.</p>
2
<p>В любой обработчик события при вызове передаётся объект типа SyntheticEvent, кросс браузерный "враппер" (обёртка) над нативным объектом события. С точки зрения интерфейса он не отличается от нативного, кроме того, что работает одинаково во всех браузерах.</p>
3
<p>SyntheticEvent хранит в себе оригинальный объект события и предоставляет интерфейс для доступа к его свойствам и методам. Этот интерфейс одинаков для всех браузеров, что крайне удобно с точки зрения разработки. К примеру, необходимо отменить действие по умолчанию (перезагрузку страницы) при отправке формы:</p>
3
<p>SyntheticEvent хранит в себе оригинальный объект события и предоставляет интерфейс для доступа к его свойствам и методам. Этот интерфейс одинаков для всех браузеров, что крайне удобно с точки зрения разработки. К примеру, необходимо отменить действие по умолчанию (перезагрузку страницы) при отправке формы:</p>
4
-
<p><a>https://codepen.io/hexlet/pen/NvVXoy</a></p>
4
+
<p><a>Попрактиковаться</a></p>
5
<p>Как видите, ничего необычного. В то же время в обычном HTML подобное поведение можно получить и другим способом. Для этого достаточно вернуть false из обработчика. В React такой вариант не пройдёт.</p>
5
<p>Как видите, ничего необычного. В то же время в обычном HTML подобное поведение можно получить и другим способом. Для этого достаточно вернуть false из обработчика. В React такой вариант не пройдёт.</p>
6
<p>Точно так же нужно поступать при необходимости предотвратить всплытие события. Только вместо preventDefault вызывается функция stopPropagation.</p>
6
<p>Точно так же нужно поступать при необходимости предотвратить всплытие события. Только вместо preventDefault вызывается функция stopPropagation.</p>
7
<p>В курсе<a>JS: DOM API</a>говорилось, что при работе с<em>HTML</em>предпочтительно использовать addEventListener. Одна из главных причин заключается в том, что такой способ позволяет повесить множество обработчиков, чем и пользуются многие JS-дополнения. В React такой способ работы просто не нужен, так как управление потоком событий всегда явное. Никто не может подключиться к React со стороны и навесить туда своих обработчиков.</p>
7
<p>В курсе<a>JS: DOM API</a>говорилось, что при работе с<em>HTML</em>предпочтительно использовать addEventListener. Одна из главных причин заключается в том, что такой способ позволяет повесить множество обработчиков, чем и пользуются многие JS-дополнения. В React такой способ работы просто не нужен, так как управление потоком событий всегда явное. Никто не может подключиться к React со стороны и навесить туда своих обработчиков.</p>
8
<p>Второй момент, который может пугать разработчиков, - это навешивание обработчиков прямо в JSX. Не лишний раз будет напомнить, что JSX - это JS-код, а не HTML. Поэтому нет никакой проблемы. Как вы увидите позже, такой код очень просто читать, потому что все находится в одном месте.</p>
8
<p>Второй момент, который может пугать разработчиков, - это навешивание обработчиков прямо в JSX. Не лишний раз будет напомнить, что JSX - это JS-код, а не HTML. Поэтому нет никакой проблемы. Как вы увидите позже, такой код очень просто читать, потому что все находится в одном месте.</p>
9
<p>React нормализует события так, что они имеют консистентные свойства в различных браузерах. Кроме того, в формах добавляется событие onChange, которое ведёт себя в соответствии со своим названием и сильно упрощает работу.</p>
9
<p>React нормализует события так, что они имеют консистентные свойства в различных браузерах. Кроме того, в формах добавляется событие onChange, которое ведёт себя в соответствии со своим названием и сильно упрощает работу.</p>