Режимы eventMode: none, passive, auto, static, dynamic

В PixiJS взаимодействие с графическими объектами построено на событийной модели. Каждый DisplayObject может обрабатывать события мыши, касаний и курсора. Для управления этим поведением используется свойство eventMode, которое определяет, как объект реагирует на события и как они распространяются по сцене.

Свойство eventMode имеет несколько ключевых значений: none, passive, auto, static, dynamic. Понимание различий между ними критично для оптимизации производительности и корректной обработки взаимодействий.

eventMode = none

Значение none отключает обработку событий для объекта полностью.

  • Характеристики:

    • Объект не будет получать события мыши или касаний.
    • Любые дочерние элементы также игнорируют события, если они не имеют своего собственного eventMode.

  • Применение:

    • Для объектов, которые используются только для визуализации без интерактивности.
    • Минимизирует накладные расходы на обработку событий.
const sprite = new PIXI.Sprite(texture);
sprite.eventMode = 'none'; // Отключение интерактивности

eventMode = passive

Режим passive делает объект интерактивным, но не позволяет изменять состояние событий, таких как preventDefault() для браузерных событий.

  • Характеристики:

    • Поддерживает клики, наведение курсора, касания.
    • Не может блокировать стандартное поведение браузера.
    • Высокая производительность, так как не требуется вычислять последствия preventDefault().

  • Применение:

    • Для объектов, где важна только реакция на события, но без вмешательства в их стандартную обработку.
sprite.eventMode = 'passive';
sprite.on('pointerdown', () => {
    console.log('Sprite clicked');
});

eventMode = auto

Значение auto устанавливает интерактивность на объекте автоматически на основе текущего состояния:

  • Характеристики:

    • Если к объекту привязаны обработчики событий, PixiJS делает его интерактивным.
    • Если обработчиков нет — объект ведёт себя как none.

  • Применение:

    • Удобно для динамически создаваемых объектов с неизвестной интерактивностью.
    • Позволяет экономить ресурсы, не делая все объекты интерактивными по умолчанию.
sprite.eventMode = 'auto';
sprite.on('pointerover', () => console.log('Hovered'));

eventMode = static

Режим static фиксирует интерактивность объекта независимо от текущих обработчиков.

  • Характеристики:

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

  • Применение:

    • Для кнопок, интерфейсных элементов, которые всегда должны быть интерактивными.
sprite.eventMode = 'static';

eventMode = dynamic

Режим dynamic обеспечивает максимальную гибкость и адаптивность в обработке событий:

  • Характеристики:

    • Объект может динамически добавлять или удалять обработчики без повторной инициализации интерактивности.
    • Подходит для сцен с постоянно изменяющимися объектами и большим количеством событий.
    • Возможны небольшие накладные расходы на производительность при частых изменениях.

  • Применение:

    • Игровые сцены с интерактивными объектами, которые появляются и исчезают.
    • Эффективно для drag-and-drop и сложных взаимодействий.
sprite.eventMode = 'dynamic';
sprite.on('pointerdown', () => console.log('Dynamic click'));
sprite.off('pointerdown'); // можно удалять обработчик без отключения интерактивности

Сравнительная таблица режимов

Режим Интерактивность Можно блокировать событие Ресурсоёмкость Применение
none нет нет низкая Визуальные объекты без интерактивности
passive да нет низкая Клики и наведение без вмешательства в поведение браузера
auto зависит от обработчиков зависит от обработчиков средняя Динамически создаваемые объекты
static всегда да да средняя Фиксированные интерактивные элементы
dynamic всегда да да выше среднего Игровые сцены и динамические интерфейсы

Практические рекомендации

  • Для объектов, где важна производительность, стоит отдавать предпочтение none или passive.
  • Для интерфейсных элементов с постоянной интерактивностью — использовать static.
  • Для динамически изменяющихся объектов с частой сменой обработчиков — использовать dynamic.
  • auto подходит для упрощённого управления, когда не хочется вручную следить за интерактивностью каждого объекта.

Эффективное управление eventMode позволяет оптимизировать производительность сцен PixiJS, особенно при большом количестве спрайтов и сложных взаимодействиях.

Оглавление