pixijs-events

Name: pixijs-events
Author: pixijs

2.9kinstalls15forks

How to install pixijs-events?

pixijs/pixijs-skills/pixijs-events

$npx -y skills add pixijs/pixijs-skills --skill pixijs-events

Installs into the current project.

Summary

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, event

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const button = new Sprite(await Assets.load("button.png"));
7	button.eventMode = "static";
8	button.cursor = "pointer";
9	app.stage.addChild(button);
10
11	button.on("pointertap", (event) => {
12	console.log("clicked at", event.global.x, event.global.y);
13	});
14
15	let dragging = false;
16	button.on("pointerdown", () => {
17	dragging = true;
18	});
19	button.on("pointerup", () => {
20	dragging = false;
21	});
22	button.on("pointerupoutside", () => {
23	dragging = false;
24	});
25	button.on("globalpointermove", (event) => {
26	if (dragging) button.parent.toLocal(event.global, undefined, button.position);
27	});
28	```
29
30	Related skills: `pixijs-accessibility` (screen reader + keyboard), `pixijs-scene-dom-container` (HTML overlays), `pixijs-performance` (event-heavy scenes).
31
32	## Core Patterns
33
34	### eventMode values
35
36	```ts
37	import { Sprite } from "pixi.js";
38
39	const sprite = new Sprite();
40
41	// No interaction at all; children also ignored
42	sprite.eventMode = "none";
43
44	// Default. Self not interactive; interactive children still work
45	sprite.eventMode = "passive";
46
47	// Hit tested only when a parent is interactive
48	sprite.eventMode = "auto";
49
50	// Standard interaction: receives pointer/mouse/touch events
51	sprite.eventMode = "static";
52
53	// Like static, but also fires synthetic events from the ticker
54	// when the pointer is stationary (for animated objects under cursor)
55	sprite.eventMode = "dynamic";
56	```
57
58	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.
59
60	Use `isInteractive()` to check whether an object can receive events:
61
62	```ts
63	sprite.eventMode = "static";
64	sprite.isInteractive(); // true
65
66	sprite.eventMode = "passive";
67	sprite.isInteractive(); // false
68	```
69
70	### Event types
71
72	Pointer events (recommended for cross-device compatibility): `pointerdown`, `pointerup`, `pointerupoutside`, `pointermove`, `pointerover`, `pointerout`, `pointerenter`, `pointerleave`, `pointertap`, `pointercancel`.
73
74	Mouse events: `mousedown`, `mouseup`, `mouseupoutside`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `click`, `rightdown`, `rightup`, `rightupoutside`, `rightclick`, `wheel`.
75
76	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.
77
78	Global move events: `globalpointermove`, `globalmousemove`, `globaltouchmove`. These fire on every pointer movement regardless of whether the pointer is over the listening object.
79
80	Container lifecycle events (no `eventMode` required): `added`, `removed`, `destroyed`, `childAdded`, `childRemoved`, `visibleChanged`.
81
82	### Listening styles
83
84	```ts
85	import { Sprite } from "pixi.js";
86
87	const sprite = new Sprite();
88	sprite.eventMode = "static";
89
90	// EventEmitter style (recommended)
91	const handler = (e) => console.log("clicked");
92	sprite.on("pointerdown", handler);
93	sprite.once("pointerdown", handler); // one-time
94	sprite.off("pointerdown", handler);
95
96	// DOM style
97	sprite.addEventListener(
98	"click",
99	(event) => {
100	console.log("Clicked!", event.detail);
101	},
102	{ once: true },
103	);
104
105	// Property-based handlers
106	sprite.onclick = (event) => {
107	console.log("Clicked!", event.detail);
108	};
109	```
110
111	### Pointer events and propagation
112
113	```ts
114	import { Sprite, Container } from "pixi.js";
115
116	const parent = new Container();
117	parent.eventMode = "static";
118
119	const child = new Sprite();
120	child.eventMode = "static";
121	parent.addChild(child);
122
123	child.on("pointerdown", (event) => {
124	console.log("child pressed");
125	event.stopPropagation(); // prevent parent from receiving this event
126	});
127
128	parent.on("pointerdown", () => {
129	console.log("parent pressed (only if child did not stop propagation)");
130	});
131	```
132
133	### Capture phase events
134
135	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.
136
137	```ts
138	container.addEventListener(
139	"pointerdown",
140	(event) => {
141	event.stopImmediatePropagation(); // blocks event from reaching children
142	},
143	{ capture: true

People who liked this also viewed

6 picks

Type

pixijs-events

2.9kinstalls15forks

View on GitHub

How to install pixijs-events?

pixijs/pixijs-skills/pixijs-events

$npx -y skills add pixijs/pixijs-skills --skill pixijs-events

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	## Quick Start
4
5	```ts
6	const button = new Sprite(await Assets.load("button.png"));
7	button.eventMode = "static";
8	button.cursor = "pointer";
9	app.stage.addChild(button);
10
11	button.on("pointertap", (event) => {
12	console.log("clicked at", event.global.x, event.global.y);
13	});
14
15	let dragging = false;
16	button.on("pointerdown", () => {
17	dragging = true;
18	});
19	button.on("pointerup", () => {
20	dragging = false;
21	});
22	button.on("pointerupoutside", () => {
23	dragging = false;
24	});
25	button.on("globalpointermove", (event) => {
26	if (dragging) button.parent.toLocal(event.global, undefined, button.position);
27	});
28	```
29
30	Related skills: `pixijs-accessibility` (screen reader + keyboard), `pixijs-scene-dom-container` (HTML overlays), `pixijs-performance` (event-heavy scenes).
31
32	## Core Patterns
33
34	### eventMode values
35
36	```ts
37	import { Sprite } from "pixi.js";
38
39	const sprite = new Sprite();
40
41	// No interaction at all; children also ignored
42	sprite.eventMode = "none";
43
44	// Default. Self not interactive; interactive children still work
45	sprite.eventMode = "passive";
46
47	// Hit tested only when a parent is interactive
48	sprite.eventMode = "auto";
49
50	// Standard interaction: receives pointer/mouse/touch events
51	sprite.eventMode = "static";
52
53	// Like static, but also fires synthetic events from the ticker
54	// when the pointer is stationary (for animated objects under cursor)
55	sprite.eventMode = "dynamic";
56	```
57
58	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.
59
60	Use `isInteractive()` to check whether an object can receive events:
61
62	```ts
63	sprite.eventMode = "static";
64	sprite.isInteractive(); // true
65
66	sprite.eventMode = "passive";
67	sprite.isInteractive(); // false
68	```
69
70	### Event types
71
72	Pointer events (recommended for cross-device compatibility): `pointerdown`, `pointerup`, `pointerupoutside`, `pointermove`, `pointerover`, `pointerout`, `pointerenter`, `pointerleave`, `pointertap`, `pointercancel`.
73
74	Mouse events: `mousedown`, `mouseup`, `mouseupoutside`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `click`, `rightdown`, `rightup`, `rightupoutside`, `rightclick`, `wheel`.
75
76	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.
77
78	Global move events: `globalpointermove`, `globalmousemove`, `globaltouchmove`. These fire on every pointer movement regardless of whether the pointer is over the listening object.
79
80	Container lifecycle events (no `eventMode` required): `added`, `removed`, `destroyed`, `childAdded`, `childRemoved`, `visibleChanged`.
81
82	### Listening styles
83
84	```ts
85	import { Sprite } from "pixi.js";
86
87	const sprite = new Sprite();
88	sprite.eventMode = "static";
89
90	// EventEmitter style (recommended)
91	const handler = (e) => console.log("clicked");
92	sprite.on("pointerdown", handler);
93	sprite.once("pointerdown", handler); // one-time
94	sprite.off("pointerdown", handler);
95
96	// DOM style
97	sprite.addEventListener(
98	"click",
99	(event) => {
100	console.log("Clicked!", event.detail);
101	},
102	{ once: true },
103	);
104
105	// Property-based handlers
106	sprite.onclick = (event) => {
107	console.log("Clicked!", event.detail);
108	};
109	```
110
111	### Pointer events and propagation
112
113	```ts
114	import { Sprite, Container } from "pixi.js";
115
116	const parent = new Container();
117	parent.eventMode = "static";
118
119	const child = new Sprite();
120	child.eventMode = "static";
121	parent.addChild(child);
122
123	child.on("pointerdown", (event) => {
124	console.log("child pressed");
125	event.stopPropagation(); // prevent parent from receiving this event
126	});
127
128	parent.on("pointerdown", () => {
129	console.log("parent pressed (only if child did not stop propagation)");
130	});
131	```
132
133	### Capture phase events
134
135	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.
136
137	```ts
138	container.addEventListener(
139	"pointerdown",
140	(event) => {
141	event.stopImmediatePropagation(); // blocks event from reaching children
142	},
143	{ capture: true

People who liked this also viewed

6 picks

Type