You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// For when you just want a regular event without `detail`
12
+
// Note that the `detail` type is `null`
13
+
classEvent1extendsAbstractEvent {}
14
+
15
+
// For when you want a event with `detail`
16
+
classEvent2extendsAbstractEvent<string> {}
17
+
18
+
// Allow caller to customise the `detail` type
19
+
// Note that the `detail` type is `unknown`
20
+
// This would be rare to use, prefer `Event4`
21
+
classEvent3<T> extendsAbstractEvent<T> {}
22
+
23
+
// Allow caller to customise the `detail` type
24
+
// But this is more accurate as not passing anything
25
+
// Would mean the `detail` is in fact `null`
26
+
classEvent4<T=null> extendsAbstractEvent<T> {}
27
+
28
+
// When you need to customise the constructor signature
29
+
classEvent5extendsAbstractEvent<string> {
30
+
constructor(options:CustomEventInit<string>) {
31
+
// Make sure you pass `arguments`!
32
+
super(Event5.name, options, arguments);
33
+
}
34
+
}
35
+
```
36
+
37
+
When redispatching an event, you must call `event.clone()`. The same instance cannot be redispatched. When the event is cloned, all constructor parameters are shallow-copied.
38
+
39
+
### `Evented`
40
+
41
+
We combine `Evented` with `AbstractEvent` to gain type-safety and convenience of the wildcard any handler.
42
+
43
+
```ts
44
+
classEventCustomextendsAbstractEvent {}
45
+
46
+
interfaceXextendsEvented {}
47
+
@Evented()
48
+
classX {}
49
+
50
+
const x =newX();
51
+
52
+
// Handle specific event, use the `name` property as the key
53
+
x.addEventListener(EventCustom.name, (e) => {
54
+
console.log(easEventCustom);
55
+
});
56
+
57
+
// Handle any event
58
+
x.addEventListener((e) => {
59
+
// This is the wrapped underlying event
60
+
console.log((easEventAny).detail);
61
+
})
62
+
```
63
+
64
+
Note that all events pass through the any event handler, it is not a "fall through" handler.
65
+
66
+
You can use this style to handle relevant events to perform side-effects, as well as propagate upwards irrelevant events.
67
+
68
+
Note that some side-effects you perform may trigger an infinite loop by causing something to emit the specific event type that you are handling. In these cases you should specialise handling of those events with a `once: true` option, so that they are only handled once.
69
+
70
+
```ts
71
+
x.addEventListener(EventInfinite.name, (e) => {
72
+
console.log(easEventInfinite);
73
+
performActionThatMayTriggerEventInfinite();
74
+
}, { once: true });
75
+
```
76
+
77
+
This will terminate the infinite loop on the first time it gets handled.
78
+
79
+
Therefore it is a good idea to always be as specific with your event types as possible.
0 commit comments