pixijs-events

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

const button = new Sprite(await Assets.load("button.png"));
button.eventMode = "static";
button.cursor = "pointer";
app.stage.addChild(button);

button.on("pointertap", (event) => {
  console.log("clicked at", event.global.x, event.global.y);
});

let dragging = false;
button.on("pointerdown", () => {
  dragging = true;
});
button.on("pointerup", () => {
  dragging = false;
});
button.on("pointerupoutside", () => {
  dragging = false;
});
button.on("globalpointermove", (event) => {
  if (dragging) button.parent.toLocal(event.global, undefined, button.position);
});

Related skills: pixijs-accessibility (screen reader + keyboard), pixijs-scene-dom-container (HTML overlays), pixijs-performance (event-heavy scenes).

Core Patterns

eventMode values

import { Sprite } from "pixi.js";

const sprite = new Sprite();

// No interaction at all; children also ignored
sprite.eventMode = "none";

// Default. Self not interactive; interactive children still work
sprite.eventMode = "passive";

// Hit tested only when a parent is interactive
sprite.eventMode = "auto";

// Standard interaction: receives pointer/mouse/touch events
sprite.eventMode = "static";

// Like static, but also fires synthetic events from the ticker
// when the pointer is stationary (for animated objects under cursor)
sprite.eventMode = "dynamic";

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:

sprite.eventMode = "static";
sprite.isInteractive(); // true

sprite.eventMode = "passive";
sprite.isInteractive(); // false