0
# Interaction & Events
1
2
Modern event system with support for mouse, touch, and pointer events with proper event propagation through the scene graph. PixiJS provides a comprehensive interaction system that handles all forms of user input.
3
4
## Capabilities
5
6
### Event System
7
8
The core event system that handles all interaction events.
9
10
```typescript { .api }
11
/**
12
* Modern interaction event system
13
*/
14
class EventSystem {
15
/** Event boundary for propagation */
16
boundary: EventBoundary;
17
18
/** Initialize event system */
19
init(): void;
20
21
/** Destroy event system */
22
destroy(): void;
23
}
24
25
/**
26
* Event boundary manages event propagation
27
*/
28
class EventBoundary {
29
/** Root display object */
30
rootTarget: DisplayObject;
31
32
/**
33
* Map pointer event to display object
34
* @param event - Pointer event
35
*/
36
mapPointerDown(event: FederatedPointerEvent): void;
37
38
/**
39
* Map pointer move event
40
* @param event - Pointer event
41
*/
42
mapPointerMove(event: FederatedPointerEvent): void;
43
44
/**
45
* Map pointer up event
46
* @param event - Pointer event
47
*/
48
mapPointerUp(event: FederatedPointerEvent): void;
49
}
50
```
51
52
### Federated Events
53
54
Modern event classes that support all input types.
55
56
```typescript { .api }
57
/**
58
* Base federated event
59
*/
60
class FederatedEvent {
61
/** Event type */
62
type: string;
63
/** Event target */
64
target: DisplayObject;
65
/** Current target in propagation */
66
currentTarget: DisplayObject;
67
/** Whether event bubbles */
68
bubbles: boolean;
69
/** Whether event is cancelable */
70
cancelable: boolean;
71
/** Whether default prevented */
72
defaultPrevented: boolean;
73
/** Event detail */
74
detail: any;
75
/** Event path */
76
path: DisplayObject[];
77
78
/** Stop event propagation */
79
stopPropagation(): void;
80
81
/** Stop immediate propagation */
82
stopImmediatePropagation(): void;
83
84
/** Prevent default behavior */
85
preventDefault(): void;
86
}
87
88
/**
89
* Pointer event for mouse, touch, and pen input
90
*/
91
class FederatedPointerEvent extends FederatedEvent {
92
/** Pointer ID */
93
pointerId: number;
94
/** Pointer width */
95
width: number;
96
/** Pointer height */
97
height: number;
98
/** Whether primary pointer */
99
isPrimary: boolean;
100
/** Pointer type */
101
pointerType: 'mouse' | 'pen' | 'touch';
102
/** Pressure */
103
pressure: number;
104
/** Button pressed */
105
button: number;
106
/** Buttons state */
107
buttons: number;
108
/** Client coordinates */
109
clientX: number;
110
clientY: number;
111
/** Movement deltas */
112
movementX: number;
113
movementY: number;
114
/** Page coordinates */
115
pageX: number;
116
pageY: number;
117
/** Screen coordinates */
118
screenX: number;
119
screenY: number;
120
/** Modifier keys */
121
altKey: boolean;
122
ctrlKey: boolean;
123
metaKey: boolean;
124
shiftKey: boolean;
125
126
/**
127
* Get local position relative to display object
128
* @param displayObject - Target display object
129
* @param point - Point to store result
130
*/
131
getLocalPosition(displayObject: DisplayObject, point?: Point): Point;
132
133
/**
134
* Get modifier state
135
* @param key - Modifier key
136
*/
137
getModifierState(key: string): boolean;
138
}
139
```
140
141
### Interactive Display Objects
142
143
Properties and methods for making objects interactive.
144
145
```typescript { .api }
146
/**
147
* Interactive properties for display objects
148
*/
149
interface InteractiveTarget {
150
/** Enable interaction */
151
interactive: boolean;
152
/** Enable interaction for children */
153
interactiveChildren: boolean;
154
/** Custom hit area */
155
hitArea: Rectangle | Circle | Ellipse | Polygon | RoundedRectangle;
156
/** Button mode cursor */
157
buttonMode: boolean;
158
/** CSS cursor */
159
cursor: string;
160
161
/** Add event listener */
162
on(event: string, fn: Function, context?: any): this;
163
164
/** Add one-time event listener */
165
once(event: string, fn: Function, context?: any): this;
166
167
/** Remove event listener */
168
off(event: string, fn?: Function, context?: any): this;
169
170
/** Emit event */
171
emit(event: string, ...args: any[]): boolean;
172
173
/** Remove all listeners */
174
removeAllListeners(event?: string): this;
175
}
176
```
177
178
**Usage Examples:**
179
180
```typescript
181
import { Sprite, Graphics } from "pixi.js";
182
183
// Basic interaction
184
const button = Sprite.from('button.png');
185
button.interactive = true;
186
button.buttonMode = true;
187
188
button.on('pointerdown', (event) => {
189
console.log('Button clicked!');
190
});
191
192
// Multiple event types
193
const sprite = Sprite.from('interactive-sprite.png');
194
sprite.interactive = true;
195
196
sprite.on('pointerover', () => sprite.tint = 0xff0000);
197
sprite.on('pointerout', () => sprite.tint = 0xffffff);
198
sprite.on('pointerdown', () => sprite.scale.set(0.9));
199
sprite.on('pointerup', () => sprite.scale.set(1.0));
200
201
// Custom hit area
202
const graphics = new Graphics();
203
graphics.beginFill(0x0000ff);
204
graphics.drawRect(0, 0, 100, 100);
205
graphics.endFill();
206
207
graphics.interactive = true;
208
graphics.hitArea = new Rectangle(0, 0, 200, 200); // Larger hit area
209
210
// Drag and drop
211
let dragTarget: DisplayObject | null = null;
212
213
app.stage.interactive = true;
214
app.stage.hitArea = app.screen;
215
216
function onDragStart(event: FederatedPointerEvent) {
217
dragTarget = event.currentTarget as DisplayObject;
218
app.stage.on('pointermove', onDragMove);
219
}
220
221
function onDragMove(event: FederatedPointerEvent) {
222
if (dragTarget) {
223
dragTarget.position = event.global;
224
}
225
}
226
227
function onDragEnd() {
228
if (dragTarget) {
229
app.stage.off('pointermove', onDragMove);
230
dragTarget = null;
231
}
232
}
233
234
sprite.on('pointerdown', onDragStart);
235
app.stage.on('pointerup', onDragEnd);
236
app.stage.on('pointerupoutside', onDragEnd);
237
```