Синтетические события и их обработка

Inferno использует систему синтетических событий, аналогичную той, что реализована в React. Синтетические события представляют собой обёртку над нативными событиями браузера, обеспечивая единый интерфейс для работы с событиями и оптимизацию производительности за счёт делегирования.

Основные принципы синтетических событий

  1. Делегирование событий Все события в Inferno делегируются через единый обработчик на корневом DOM-элементе. Это позволяет:

    • уменьшить количество привязанных обработчиков к DOM-узлам;
    • улучшить производительность при больших деревьях компонентов;
    • управлять событиями централизованно.

  2. Кроссбраузерность Синтетические события скрывают различия между браузерами, предоставляя единый API. Например, методы preventDefault() и stopPropagation() работают одинаково во всех поддерживаемых браузерах.

  3. Автоматическое пуллирование В отличие от нативных событий, синтетические объекты событий могут переиспользоваться Inferno для экономии памяти. После вызова обработчика свойства события становятся недоступными, если не сохранять их явно через метод event.persist().

Поддерживаемые типы событий

Inferno поддерживает все стандартные DOM-события, включая:

  • Мышиные события: onClick, onDoubleClick, onMouseEnter, onMouseLeave, onMouseMove
  • Клавиатурные события: onKeyDown, onKeyPress, onKeyUp
  • Фокус и ввод: onFocus, onBlur, onChange, onInput
  • Формы: onSubmit, onReset
  • События документа и окна: onScroll, onResize, onWheel

Каждое событие в Inferno представлено как свойство компонента, начинающееся с on и следующей за ним заглавной буквы (camelCase).

Привязка обработчиков

Обработчики событий в Inferno передаются как функции:

function handleClick(event) {
    console.log('Клик обработан', event.type);
}

const Button = () => (
    <button onCl ick={handleClick}>Нажми меня</button>
);

При этом event внутри обработчика — синтетический объект события. Он содержит стандартные свойства:

  • event.target — элемент, на котором произошло событие
  • event.currentTarget — элемент, к которому привязан обработчик
  • event.type — тип события
  • методы preventDefault(), stopPropagation()

Особенности работы с синтетическими событиями

  1. Асинхронность События в Inferno обрабатываются в фазе батча. Это значит, что при множественных событиях внутри одного цикла событий они могут быть объединены для оптимизации перерисовки.

  2. Доступ к реальному DOM Свойства nativeEvent и target позволяют получить ссылку на исходное нативное событие браузера.

  3. События форм и ввода Для <input> и <textarea> синтетические события обеспечивают корректное обновление состояния через onChange и onInput. Inferno отслеживает значения элементов и обеспечивает синхронизацию с виртуальным DOM, что предотвращает несогласованность состояния и реального DOM.

Управление событиями в компонентах

Обработчики можно привязывать к функциональным и классовым компонентам. Для классовых компонентов важно учитывать контекст this:

class MyComponent extends Inferno.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        console.log(this.props.message, event.type);
    }

    render() {
        return <button onCl ick={this.handleClick}>Клик</button>;
    }
}

Для функциональных компонентов используется замыкание:

const MyComponent = ({ message }) => {
    const handleClick = event => console.log(message, event.type);
    return <button onCl ick={handleClick}>Клик</button>;
};

События с параметрами

Для передачи дополнительных параметров обработчику создаются обёртки функций:

const handleClick = (id, event) => {
    event.preventDefault();
    console.log('ID элемента:', id);
};

<button onCl ick={event => handleClick(42, event)}>Клик</button>

Оптимизация обработки событий

  • Использование одного обработчика для группы элементов через event delegation повышает производительность.
  • Сохранение ссылки на обработчик предотвращает лишние пересоздания функций при рендере.
  • Избегание ненужных вызовов bind или стрелочных функций в JSX снижает нагрузку на GC.

Методы синтетических событий

  • preventDefault() — отменяет действие браузера по умолчанию
  • stopPropagation() — останавливает всплытие события
  • persist() — сохраняет объект события для дальнейшего использования после батча

Отличие от нативных событий

  • Синтетическое событие унифицировано для всех браузеров
  • События делегируются на уровне корня приложения
  • Пуллинг объектов событий снижает нагрузку на память
  • Функции обработчиков вызываются после всех обновлений состояния в батче

Выводы по обработке синтетических событий

Система синтетических событий Inferno обеспечивает оптимизированную и безопасную обработку событий. Она уменьшает накладные расходы на работу с DOM, гарантирует единый интерфейс во всех браузерах и позволяет разработчику контролировать поток событий через методы preventDefault, stopPropagation и persist. Правильное использование синтетических событий в сочетании с виртуальным DOM обеспечивает высокую производительность и предсказуемое поведение интерфейса.

Оглавление