PixiJS EventSystem vs Legacy InteractionManager

This article explains the transition in PixiJS from the legacy InteractionManager to the modern EventSystem introduced in version 7. You will learn how the new event model improves performance, aligns with modern web standards, and simplifies input handling across desktop and mobile devices.

The Shift to the Pointer Events API

The legacy InteractionManager was built during an era when touch and mouse inputs had to be handled separately. It synthesized custom interaction events, which often led to inconsistent behavior across different browsers and devices.

In contrast, the modern EventSystem is built entirely on the native W3C Pointer Events API. This API unifies mouse, touch, and pen inputs into a single interface. By aligning with web standards, the EventSystem eliminates the need for redundant code paths for different device types, resulting in a more predictable and unified input model.

Event Propagation: Bubbling and Capturing

One of the most significant architectural upgrades in the EventSystem is the implementation of standard DOM-like event propagation.

• Legacy InteractionManager: Supported a basic version of event bubbling, but lacked the robust capturing phase found in standard web browsers.
• Modern EventSystem: Implements full capturing, targeting, and bubbling phases. This allows you to intercept events at container levels before they reach child elements (capturing phase) or handle them as they bubble back up the scene graph. You can use standard methods like event.stopPropagation() and event.stopImmediatePropagation() to control the flow of events precisely as you would in standard HTML.

Performance and the Ticker

The legacy InteractionManager relied heavily on the PixiJS application ticker. It ran hit-tests and updated interaction states on every single frame, regardless of whether any pointer movement or interaction actually occurred. This caused unnecessary CPU overhead, especially in complex scenes with thousands of display objects.

The modern EventSystem is driven by event listeners attached to the canvas. It only processes hit-testing and event dispatching when a pointer event is actually fired by the browser. By decoupling interaction from the rendering loop, PixiJS significantly reduces CPU usage, leading to smoother frame rates and better battery life on mobile devices.

Customizable Boundaries

With the EventSystem, PixiJS introduced the concept of the EventBoundary. The EventBoundary class is responsible for taking a point and mapping it to a specific display object in the scene graph.

Because this logic is decoupled from the main event manager, developers can now instantiate custom boundaries. This makes it possible to manage event hits on off-screen display objects, perform custom spatial hashing, or isolate specific branches of the scene graph for specialized UI interactions without affecting the rest of the application.