-
-
Notifications
You must be signed in to change notification settings - Fork 185
/
EventTarget.ts
292 lines (257 loc) · 9.34 KB
/
EventTarget.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
import IEventListener from './IEventListener.js';
import * as PropertySymbol from '../PropertySymbol.js';
import Event from './Event.js';
import IEventListenerOptions from './IEventListenerOptions.js';
import EventPhaseEnum from './EventPhaseEnum.js';
import Node from '../nodes/node/Node.js';
import Document from '../nodes/document/Document.js';
import BrowserWindow from '../window/BrowserWindow.js';
import WindowErrorUtility from '../window/WindowErrorUtility.js';
import WindowBrowserSettingsReader from '../window/WindowBrowserSettingsReader.js';
import BrowserErrorCaptureEnum from '../browser/enums/BrowserErrorCaptureEnum.js';
/**
* Handles events.
*/
export default abstract class EventTarget {
public readonly [PropertySymbol.listeners]: {
[k: string]: (((event: Event) => void) | IEventListener)[];
} = {};
public readonly [PropertySymbol.listenerOptions]: {
[k: string]: (IEventListenerOptions | null)[];
} = {};
/**
* Return a default description for the EventTarget class.
*/
public get [Symbol.toStringTag](): string {
return 'EventTarget';
}
/**
* Adds an event listener.
*
* @param type Event type.
* @param listener Listener.
* @param options An object that specifies characteristics about the event listener.(currently only once)
* @param options.once
*/
public addEventListener(
type: string,
listener: ((event: Event) => void) | IEventListener,
options?: boolean | IEventListenerOptions
): void {
const listenerOptions = typeof options === 'boolean' ? { capture: options } : options || null;
this[PropertySymbol.listeners][type] = this[PropertySymbol.listeners][type] || [];
this[PropertySymbol.listenerOptions][type] = this[PropertySymbol.listenerOptions][type] || [];
if (this[PropertySymbol.listeners][type].includes(listener)) {
return;
}
this[PropertySymbol.listeners][type].push(listener);
this[PropertySymbol.listenerOptions][type].push(listenerOptions);
// Tracks the amount of capture event listeners to improve performance when they are not used.
if (listenerOptions && listenerOptions.capture) {
const window = this.#getWindow();
if (window) {
window[PropertySymbol.captureEventListenerCount][type] =
window[PropertySymbol.captureEventListenerCount][type] ?? 0;
window[PropertySymbol.captureEventListenerCount][type]++;
}
}
}
/**
* Adds an event listener.
*
* @param type Event type.
* @param listener Listener.
*/
public removeEventListener(
type: string,
listener: ((event: Event) => void) | IEventListener
): void {
if (this[PropertySymbol.listeners][type]) {
const index = this[PropertySymbol.listeners][type].indexOf(listener);
if (index !== -1) {
// Tracks the amount of capture event listeners to improve performance when they are not used.
if (
this[PropertySymbol.listenerOptions][type][index] &&
this[PropertySymbol.listenerOptions][type][index].capture
) {
const window = this.#getWindow();
if (window && window[PropertySymbol.captureEventListenerCount][type]) {
window[PropertySymbol.captureEventListenerCount][type]--;
}
}
this[PropertySymbol.listeners][type].splice(index, 1);
this[PropertySymbol.listenerOptions][type].splice(index, 1);
}
}
}
/**
* Dispatches an event.
*
* @see https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
* @see https://www.quirksmode.org/js/events_order.html#link4
* @param event Event.
* @returns The return value is false if event is cancelable and at least one of the event handlers which handled this event called Event.preventDefault().
*/
public dispatchEvent(event: Event): boolean {
const window = this.#getWindow();
if (event.eventPhase === EventPhaseEnum.none) {
event[PropertySymbol.target] = this;
const composedPath = event.composedPath();
// Capturing phase
// We only need to iterate over the composed path if there are capture event listeners.
if (window && window[PropertySymbol.captureEventListenerCount][event.type]) {
event.eventPhase = EventPhaseEnum.capturing;
for (let i = composedPath.length - 1; i >= 0; i--) {
composedPath[i].dispatchEvent(event);
if (
event[PropertySymbol.propagationStopped] ||
event[PropertySymbol.immediatePropagationStopped]
) {
break;
}
}
}
// At target phase
event.eventPhase = EventPhaseEnum.atTarget;
this.dispatchEvent(event);
// Bubbling phase
if (
event.bubbles &&
!event[PropertySymbol.propagationStopped] &&
!event[PropertySymbol.immediatePropagationStopped]
) {
event.eventPhase = EventPhaseEnum.bubbling;
for (let i = 1; i < composedPath.length; i++) {
composedPath[i].dispatchEvent(event);
if (
event[PropertySymbol.propagationStopped] ||
event[PropertySymbol.immediatePropagationStopped]
) {
break;
}
}
}
// None phase (completed)
event.eventPhase = EventPhaseEnum.none;
return !(event.cancelable && event.defaultPrevented);
}
event[PropertySymbol.currentTarget] = this;
const browserSettings = window ? WindowBrowserSettingsReader.getSettings(window) : null;
if (event.eventPhase !== EventPhaseEnum.capturing) {
const onEventName = 'on' + event.type.toLowerCase();
if (typeof this[onEventName] === 'function') {
// We can end up in a never ending loop if the listener for the error event on Window also throws an error.
if (
window &&
(this !== <EventTarget>window || event.type !== 'error') &&
!browserSettings?.disableErrorCapturing &&
browserSettings?.errorCapture === BrowserErrorCaptureEnum.tryAndCatch
) {
WindowErrorUtility.captureError(window, this[onEventName].bind(this, event));
} else {
this[onEventName].call(this, event);
}
}
}
if (this[PropertySymbol.listeners][event.type]) {
// We need to clone the arrays because the listeners may remove themselves while we are iterating.
const listeners = this[PropertySymbol.listeners][event.type].slice();
const listenerOptions = this[PropertySymbol.listenerOptions][event.type].slice();
for (let i = 0, max = listeners.length; i < max; i++) {
const listener = listeners[i];
const options = listenerOptions[i];
if (
(options?.capture && event.eventPhase !== EventPhaseEnum.capturing) ||
(!options?.capture && event.eventPhase === EventPhaseEnum.capturing)
) {
continue;
}
if (options?.passive) {
event[PropertySymbol.isInPassiveEventListener] = true;
}
// We can end up in a never ending loop if the listener for the error event on Window also throws an error.
if (
window &&
(this !== <EventTarget>window || event.type !== 'error') &&
!browserSettings?.disableErrorCapturing &&
browserSettings?.errorCapture === BrowserErrorCaptureEnum.tryAndCatch
) {
if ((<IEventListener>listener).handleEvent) {
WindowErrorUtility.captureError(
window,
(<IEventListener>listener).handleEvent.bind(listener, event)
);
} else {
WindowErrorUtility.captureError(
window,
(<(event: Event) => void>listener).bind(this, event)
);
}
} else {
if ((<IEventListener>listener).handleEvent) {
(<IEventListener>listener).handleEvent(event);
} else {
(<(event: Event) => void>listener).call(this, event);
}
}
event[PropertySymbol.isInPassiveEventListener] = false;
if (options?.once) {
// At this time, listeners and listenersOptions are cloned arrays. When the original value is deleted,
// The value corresponding to the cloned array is not deleted. So we need to delete the value in the cloned array.
listeners.splice(i, 1);
listenerOptions.splice(i, 1);
this.removeEventListener(event.type, listener);
i--;
max--;
}
if (event[PropertySymbol.immediatePropagationStopped]) {
return !(event.cancelable && event.defaultPrevented);
}
}
}
return !(event.cancelable && event.defaultPrevented);
}
/**
* Adds an event listener.
*
* TODO:
* Was used by with IE8- and Opera. React believed Happy DOM was a legacy browser and used them, but that is no longer the case, so we should remove this method after that this is verified.
*
* @deprecated
* @param type Event type.
* @param listener Listener.
*/
public attachEvent(type: string, listener: ((event: Event) => void) | IEventListener): void {
this.addEventListener(type.replace('on', ''), listener);
}
/**
* Removes an event listener.
*
* TODO:
* Was used by IE8- and Opera. React believed Happy DOM was a legacy browser and used them, but that is no longer the case, so we should remove this method after that this is verified.
*
* @deprecated
* @param type Event type.
* @param listener Listener.
*/
public detachEvent(type: string, listener: ((event: Event) => void) | IEventListener): void {
this.removeEventListener(type.replace('on', ''), listener);
}
/**
* Finds and returns window if possible.
*
* @returns Window.
*/
#getWindow(): BrowserWindow | null {
if ((<Node>(<unknown>this))[PropertySymbol.ownerDocument]) {
return (<Node>(<unknown>this))[PropertySymbol.ownerDocument][PropertySymbol.ownerWindow];
}
if ((<Document>(<unknown>this))[PropertySymbol.ownerWindow]) {
return (<Document>(<unknown>this))[PropertySymbol.ownerWindow];
}
if ((<BrowserWindow>(<unknown>this)).document) {
return <BrowserWindow>(<unknown>this);
}
return null;
}
}