Use this skill when handling pointer, mouse, touch, or wheel input in PixiJS v8. Covers eventMode (none, passive, auto, static, dynamic), FederatedEvent types, propagation and capture phase, hitArea, interactiveChildren, cursor and cursorStyles, global move events for drag, eventFeatures config. Tri

PixiJS's federated event system mirrors DOM events on the scene graph. Set container.eventMode = 'static' to opt an object in, then listen with .on() , addEventListener() , or onEventName property handlers. Move events fire only over the listening object; use globalpointermove for drag. Quick Start Related skills: pixijs accessibility (screen reader + keyboard), pixijs scene dom container (HTML overlays), pixijs performance (event heavy scenes). Core Patterns eventMode values Use 'static' for buttons, UI elements, and drag targets. Use 'dynamic' only for objects that move under a stationary cursor and need continuous hover updates. Use isInteractive() to check whether an object can receive events: Event types Pointer events (recommended for cross device compatibility): pointerdown , pointerup , pointerupoutside , pointermove , pointerover , pointerout , pointerenter , pointerleave , pointertap , pointercancel . Mouse events: mousedown , mouseup , mouseupoutside , mousemove , mouseover , mouseout , mouseenter , mouseleave , click , rightdown , rightup , rightupoutside , rightclick , wheel . Touch events: touchstart , touchend , touchendoutside , touchmove , touchcancel , tap . Each touch carries altKey , ctrlKey , metaKey , and shiftKey copied from the native TouchEvent , so modifier keys work the same as with mouse or pointer events. Global move events: globalpointermove , globalmousemove , globaltouchmove . These fire on every pointer movement regardless of whether the pointer is over the listening object. Container lifecycle events (no eventMode required): added , removed , destroyed , childAdded , childRemoved , visibleChanged . Listening styles Pointer events and propagation Capture phase events All events support capture phase by appending capture to the event name (e.g., pointerdowncapture , clickcapture ). Capture listeners fire during the capturing phase, before the event reaches its target. Hit testing When a pointer event fires, PixiJS walks the display tree to find the top most interactive element under the pointer. The traversal follows these rules: eventMode = 'none' on a container skips that element and its entire subtree. interactiveChildren = false on a container skips its children (the container itself can still be tested). A hitArea overrides bounds based testing; only the shape is checked. Objects that are not visible, not renderable, or not measurable are skipped. Set a custom hitArea to override bounds based testing. This also speeds up hit tests on large or complex objects by reducing the geometry checked: Global move events and drag Cursor styles Basic usage sets the cursor property per object. For reusable cursors, register named styles on the event system: Cursor styles can be strings (CSS cursor values), objects (applied as CSS styles), or functions (called with the mode string). Event properties FederatedPointerEvent carries rich input data; the more useful fields are: FederatedWheelEvent adds deltaX , deltaY , deltaZ , and deltaMode . Wheel events fire on the same hit tested object as pointer events. Event features Toggle event categories globally for performance: Performance tips Set eventMode = 'none' on non interactive subtrees to skip hit testing entirely. Set interactiveChildren = false on containers where only the container itself needs interaction. Use hitArea on large or complex objects to replace bounds based hit testing with a cheap shape check. Prefer 'static' for stationary elements; reserve 'dynamic' for objects that move or animate under a stationary pointer. Disable unused event features via eventFeatures (e.g., globalMove: false ) to cut per frame work. Common Mistakes [HIGH] Default eventMode is passive Wrong: Correct: The default eventMode is 'passive' , which means the object itself receives no events. You must explicitly set eventMode to 'static' or 'dynamic' before any listener will fire. [HIGH] buttonMode removed; use cursor Wrong: Correct: buttonMode was removed in v8. Use cursor = 'pointer' to show a hand cursor on hover. interactive = true still works as an alias for eventMode = 'static' , but eventMode is preferred. [HIGH] Move events only fire over the object in v8 Wrong: Correct: In v8, pointermove , mousemove , and touchmove only fire when the pointer is over the display object. In v7 they fired on any canvas move. For drag operations or global tracking, use globalpointermove , globalmousemove , or globaltouchmove . [MEDIUM] Cursor does not inherit from parent Setting cursor on a parent container has no effect on its children. Only the direct hit target's cursor value is applied. If you want a uniform cursor for all children, set cursor on each interactive child individually, or set hitArea on the parent and make children non interactive. API Reference [EventSystem](https://pixijs.download/release/docs/events.EventSystem.html.md) [FederatedEvent](https://pixijs.download/release/docs/events.FederatedEvent.html.md) [FederatedPointerEvent](https://pixijs.download/release/docs/events.FederatedPointerEvent.html.md) [FederatedMouseEvent](https://pixijs.download/release/docs/events.FederatedMouseEvent.html.md) [FederatedWheelEvent](https://pixijs.download/release/docs/events.FederatedWheelEvent.html.md) [EventBoundary](https://pixijs.download/release/docs/events.EventBoundary.html.md)

pixijs-events