Skip to content

Commit bd88982

Browse files
trueadmtrueadm
authored
Event API: use capture for all event listeners using experimental responder system (facebook#15526)
1 parent 72ca3c6 commit bd88982

File tree

12 files changed

+38
-68
lines changed

12 files changed

+38
-68
lines changed

‎packages/events/EventSystemFlags.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,4 @@ export const PLUGIN_EVENT_SYSTEM = 1;
1313
export const RESPONDER_EVENT_SYSTEM = 1 << 1;
1414
export const IS_PASSIVE = 1 << 2;
1515
export const IS_ACTIVE = 1 << 3;
16-
export const IS_CAPTURE = 1 << 4;
17-
export const PASSIVE_NOT_SUPPORTED = 1 << 5;
16+
export const PASSIVE_NOT_SUPPORTED = 1 << 4;

‎packages/react-dom/src/client/ReactDOMComponent.js

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1294,7 +1294,6 @@ export function listenToEventResponderEventTypes(
12941294
for (let i = 0, length = eventTypes.length; i < length; ++i) {
12951295
const targetEventType = eventTypes[i];
12961296
let topLevelType;
1297-
let capture = false;
12981297
let passive = true;
12991298

13001299
// If no event config object is provided (i.e. - only a string),
@@ -1313,26 +1312,17 @@ export function listenToEventResponderEventTypes(
13131312
const targetEventConfigObject = ((targetEventType: any): {
13141313
name: string,
13151314
passive?: boolean,
1316-
capture?: boolean,
13171315
});
13181316
topLevelType = targetEventConfigObject.name;
13191317
if (targetEventConfigObject.passive !== undefined) {
13201318
passive = targetEventConfigObject.passive;
13211319
}
1322-
if (targetEventConfigObject.capture !== undefined) {
1323-
capture = targetEventConfigObject.capture;
1324-
}
13251320
}
1326-
const listeningName = generateListeningKey(
1327-
topLevelType,
1328-
passive,
1329-
capture,
1330-
);
1321+
const listeningName = generateListeningKey(topLevelType, passive);
13311322
if (!listeningSet.has(listeningName)) {
13321323
trapEventForResponderEventSystem(
13331324
element,
13341325
((topLevelType: any): DOMTopLevelEventType),
1335-
capture,
13361326
passive,
13371327
);
13381328
listeningSet.add(listeningName);

‎packages/react-dom/src/events/DOMEventResponderSystem.js

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
import {
1010
type EventSystemFlags,
1111
IS_PASSIVE,
12-
IS_CAPTURE,
1312
PASSIVE_NOT_SUPPORTED,
1413
} from 'events/EventSystemFlags';
1514
import type {AnyNativeEvent} from 'events/PluginModuleType';
@@ -247,28 +246,22 @@ const eventResponderContext: ReactResponderContext = {
247246
for (let i = 0; i < rootEventTypes.length; i++) {
248247
const rootEventType = rootEventTypes[i];
249248
let name = rootEventType;
250-
let capture = false;
251249
let passive = true;
252250

253251
if (typeof rootEventType !== 'string') {
254252
const targetEventConfigObject = ((rootEventType: any): {
255253
name: string,
256254
passive?: boolean,
257-
capture?: boolean,
258255
});
259256
name = targetEventConfigObject.name;
260257
if (targetEventConfigObject.passive !== undefined) {
261258
passive = targetEventConfigObject.passive;
262259
}
263-
if (targetEventConfigObject.capture !== undefined) {
264-
capture = targetEventConfigObject.capture;
265-
}
266260
}
267261

268262
const listeningName = generateListeningKey(
269263
((name: any): string),
270264
passive,
271-
capture,
272265
);
273266
let rootEventComponents = rootEventTypesToEventComponentInstances.get(
274267
listeningName,
@@ -537,27 +530,21 @@ function getTargetEventTypesSet(
537530
for (let i = 0; i < eventTypes.length; i++) {
538531
const eventType = eventTypes[i];
539532
let name = eventType;
540-
let capture = false;
541533
let passive = true;
542534

543535
if (typeof eventType !== 'string') {
544536
const targetEventConfigObject = ((eventType: any): {
545537
name: string,
546538
passive?: boolean,
547-
capture?: boolean,
548539
});
549540
name = targetEventConfigObject.name;
550541
if (targetEventConfigObject.passive !== undefined) {
551542
passive = targetEventConfigObject.passive;
552543
}
553-
if (targetEventConfigObject.capture !== undefined) {
554-
capture = targetEventConfigObject.capture;
555-
}
556544
}
557545
const listeningName = generateListeningKey(
558546
((name: any): string),
559547
passive,
560-
capture,
561548
);
562549
cachedSet.add(listeningName);
563550
}
@@ -640,12 +627,10 @@ function traverseAndHandleEventResponderInstances(
640627
eventSystemFlags: EventSystemFlags,
641628
): void {
642629
const isPassiveEvent = (eventSystemFlags & IS_PASSIVE) !== 0;
643-
const isCaptureEvent = (eventSystemFlags & IS_CAPTURE) !== 0;
644630
const isPassiveSupported = (eventSystemFlags & PASSIVE_NOT_SUPPORTED) === 0;
645631
const listeningName = generateListeningKey(
646632
((topLevelType: any): string),
647633
isPassiveEvent || !isPassiveSupported,
648-
isCaptureEvent,
649634
);
650635

651636
// Trigger event responders in this order:
@@ -875,29 +860,20 @@ function registerRootEventType(
875860
eventComponentInstance: ReactEventComponentInstance,
876861
): void {
877862
let name = rootEventType;
878-
let capture = false;
879863
let passive = true;
880864

881865
if (typeof rootEventType !== 'string') {
882866
const targetEventConfigObject = ((rootEventType: any): {
883867
name: string,
884868
passive?: boolean,
885-
capture?: boolean,
886869
});
887870
name = targetEventConfigObject.name;
888871
if (targetEventConfigObject.passive !== undefined) {
889872
passive = targetEventConfigObject.passive;
890873
}
891-
if (targetEventConfigObject.capture !== undefined) {
892-
capture = targetEventConfigObject.capture;
893-
}
894874
}
895875

896-
const listeningName = generateListeningKey(
897-
((name: any): string),
898-
passive,
899-
capture,
900-
);
876+
const listeningName = generateListeningKey(((name: any): string), passive);
901877
let rootEventComponentInstances = rootEventTypesToEventComponentInstances.get(
902878
listeningName,
903879
);
@@ -928,12 +904,10 @@ function registerRootEventType(
928904
export function generateListeningKey(
929905
topLevelType: string,
930906
passive: boolean,
931-
capture: boolean,
932907
): string {
933908
// Create a unique name for this event, plus its properties. We'll
934909
// use this to ensure we don't listen to the same event with the same
935910
// properties again.
936911
const passiveKey = passive ? '_passive' : '_active';
937-
const captureKey = capture ? '_capture' : '';
938-
return `${topLevelType}${passiveKey}${captureKey}`;
912+
return `${topLevelType}${passiveKey}`;
939913
}

‎packages/react-dom/src/events/EventListener.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,14 @@ export function addEventCaptureListener(
2323
element.addEventListener(eventType, listener, true);
2424
}
2525

26-
export function addEventListener(
26+
export function addEventCaptureListenerWithPassiveFlag(
2727
element: Document | Element | Node,
2828
eventType: string,
2929
listener: Function,
30-
options: {passive: boolean},
30+
passive: boolean,
3131
): void {
32-
element.addEventListener(eventType, listener, (options: any));
32+
element.addEventListener(eventType, listener, {
33+
capture: true,
34+
passive,
35+
});
3336
}

‎packages/react-dom/src/events/ReactDOMEventListener.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,13 @@ import {
2222
RESPONDER_EVENT_SYSTEM,
2323
IS_PASSIVE,
2424
IS_ACTIVE,
25-
IS_CAPTURE,
2625
PASSIVE_NOT_SUPPORTED,
2726
} from 'events/EventSystemFlags';
2827

2928
import {
3029
addEventBubbleListener,
3130
addEventCaptureListener,
32-
addEventListener,
31+
addEventCaptureListenerWithPassiveFlag,
3332
} from './EventListener';
3433
import getEventTarget from './getEventTarget';
3534
import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
@@ -168,7 +167,6 @@ export function trapCapturedEvent(
168167
export function trapEventForResponderEventSystem(
169168
element: Document | Element | Node,
170169
topLevelType: DOMTopLevelEventType,
171-
capture: boolean,
172170
passive: boolean,
173171
): void {
174172
if (enableEventAPI) {
@@ -190,15 +188,18 @@ export function trapEventForResponderEventSystem(
190188
} else {
191189
eventFlags |= IS_ACTIVE;
192190
}
193-
if (capture) {
194-
eventFlags |= IS_CAPTURE;
195-
}
196191
// Check if interactive and wrap in interactiveUpdates
197192
const listener = dispatchEvent.bind(null, topLevelType, eventFlags);
198-
addEventListener(element, rawEventName, listener, {
199-
capture,
200-
passive,
201-
});
193+
if (passiveBrowserEventsSupported) {
194+
addEventCaptureListenerWithPassiveFlag(
195+
element,
196+
rawEventName,
197+
listener,
198+
passive,
199+
);
200+
} else {
201+
addEventCaptureListener(element, rawEventName, listener);
202+
}
202203
}
203204
}
204205

‎packages/react-dom/src/events/forks/EventListener-www.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ const EventListenerWWW = require('EventListener');
1212
import typeof * as EventListenerType from '../EventListener';
1313
import typeof * as EventListenerShimType from './EventListener-www';
1414

15-
const NORMAL_PRIORITY = 0;
16-
1715
export function addEventBubbleListener(
1816
element: Element,
1917
eventType: string,
@@ -30,18 +28,17 @@ export function addEventCaptureListener(
3028
EventListenerWWW.capture(element, eventType, listener);
3129
}
3230

33-
export function addEventListener(
31+
export function addEventCaptureListenerWithPassiveFlag(
3432
element: Element,
3533
eventType: string,
3634
listener: Function,
37-
options: {passive: boolean},
35+
passive: boolean,
3836
): void {
39-
EventListenerWWW.listen(
37+
EventListenerWWW.captureWithPassiveFlag(
4038
element,
4139
eventType,
4240
listener,
43-
NORMAL_PRIORITY,
44-
options,
41+
passive,
4542
);
4643
}
4744

‎packages/react-events/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ events, and implement a state machine.
3434
// types
3535
type ResponderEventType =
3636
| string
37-
| {name: string, passive?: boolean, capture?: boolean};
37+
| {name: string, passive?: boolean};
3838

3939
type ResponderEvent = {|
4040
nativeEvent: any,

‎packages/react-events/src/Focus.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ type FocusEvent = {|
3636
|};
3737

3838
const targetEventTypes = [
39-
{name: 'focus', passive: true, capture: true},
40-
{name: 'blur', passive: true, capture: true},
39+
{name: 'focus', passive: true},
40+
{name: 'blur', passive: true},
4141
];
4242

4343
const rootEventTypes = [

‎packages/react-events/src/FocusScope.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ type FocusScopeState = {
2525
};
2626

2727
const targetEventTypes = [{name: 'keydown', passive: false}];
28-
const rootEventTypes = [{name: 'focus', passive: true, capture: true}];
28+
const rootEventTypes = [{name: 'focus', passive: true}];
2929

3030
function focusElement(element: ?HTMLElement) {
3131
if (element != null) {

‎packages/react-events/src/__tests__/Press-test.internal.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1269,13 +1269,13 @@ describe('Event responder: Press', () => {
12691269
createPointerEvent('pointerup', {pageX: 10, pageY: 10}),
12701270
);
12711271
expect(events).toEqual([
1272-
'pointerdown',
12731272
'inner: onPressStart',
12741273
'inner: onPressChange',
1275-
'pointerup',
1274+
'pointerdown',
12761275
'inner: onPressEnd',
12771276
'inner: onPressChange',
12781277
'inner: onPress',
1278+
'pointerup',
12791279
]);
12801280
});
12811281

‎packages/shared/ReactTypes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export type RefObject = {|
8383

8484
export type ReactEventResponderEventType =
8585
| string
86-
| {name: string, passive?: boolean, capture?: boolean};
86+
| {name: string, passive?: boolean};
8787

8888
export type ReactEventResponder = {
8989
targetEventTypes?: Array<ReactEventResponderEventType>,

‎scripts/flow/environment.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,11 @@ declare module 'EventListener' {
3939
options?: {passive: boolean},
4040
) => mixed,
4141
capture: (target: Element, type: string, callback: Function) => mixed,
42+
captureWithPassiveFlag: (
43+
target: Element,
44+
type: string,
45+
callback: Function,
46+
passive: boolean,
47+
) => mixed,
4248
};
4349
}

0 commit comments

Comments
 (0)