SyntheticEvent §

React использует систему событий, которая основана на делегировании событий event delegation. При делегировании событий React добавляет обработчики событий на родительские элементы и использует всплытие событий event bubbling, чтобы обработать события на дочерних элементах.

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

Например, в синтетическом событии есть метод preventDefault(), который предотвращает выполнение действий по умолчанию при возникновении события, таких как переход по ссылке или отправка формы. Также в синтетическом событии есть метод stopPropagation(), который предотвращает всплытие события и останавливает его обработку на текущем элементе.

Синтетические события используются в обработчиках событий, которые передаются в компоненты в качестве свойств (props). Например:

function handleClick(event) {
  event.preventDefault()
  console.log("The link was clicked.")
}
 
function MyComponent() {
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  )
}

Здесь обработчик handleClick получает синтетическое событие в качестве аргумента event и использует его метод preventDefault() для предотвращения перехода по ссылке при клике на элемент <a>.

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

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

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

• События буфера обмена
• Композиционные события
• События клавиатуры
• События фокуса
• События формы
• Общие события
• События мыши
• События курсора
• События выбора
• Сенсорные события
• События UI
• События колёсика мыши
• События медиа-элементов
• События изображений
• События анимаций
• События переходов
• Другие события

event.persist() §

event.persist() - это метод, который используется для сохранения SyntheticEvent после его завершения. Проще говоря, метод event.persist() позволяет обрабатывать асинхронный код внутри обработчика событий.

Когда вызывается обработчик события, объект SyntheticEvent создается для представления этого события. Этот объект содержит информацию о событии, такую как тип, цель, данные и т. д. Однако по умолчанию, после завершения обработчика события, объект SyntheticEvent становится недоступным и может быть переиспользован для других событий.

Метод event.persist() позволяет сохранить объект SyntheticEvent после завершения обработчика события. Это полезно, когда вам нужно продолжить использовать объект SyntheticEvent за пределами обработчика события, например, при асинхронной обработке событий или внутри функций обратного вызова.

Вот пример использования метода event.persist():

function MyComponent() {
  function handleClick(event) {
    event.persist()
    setTimeout(() => {
      console.log(event.type)
    }, 1000)
  }
 
  return <button onClick={handleClick}>Click me</button>
}

В этом примере при клике на кнопку будет вызван обработчик handleClick. Внутри обработчика мы вызываем event.persist(), чтобы сохранить объект SyntheticEvent после завершения обработчика. Затем через 1 секунду мы выводим тип события в консоль, используя сохраненный объект SyntheticEvent.

Примечание: Начиная с 17 версии, вызов e.persist() не имеет смысла, потому что объекты событий SyntheticEvent больше не добавляются в пул.

Назад