react合成事件

Copy 
1<button onClick={this.onClick}>单击触发react事件</button>

Copy 
1export function listenTo(
2  registrationName: string, // 注册名称，如onClick
3  mountAt: Document | Element | Node // 组件树容器，一般是Document
4): void {
5  const listeningSet = getListeningSetForElement(mountAt); // 已订阅事件表
6  const dependencies = registrationNameDependencies[registrationName]; // 事件依赖
7
8  for (let i = 0; i < dependencies.length; i++) {
9    const dependency = dependencies[i];
10    if (!listeningSet.has(dependency)) {
11      // 未订阅
12      switch (dependency) {
13        // ... 特殊的事件监听处理
14        default:
15          const isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
16          if (!isMediaEvent) {
17            trapBubbledEvent(dependency, mountAt); // 设置事件处理器
18          }
19          break;
20      }
21      listeningSet.add(dependency); // 更新已订阅表
22    }
23  }
24}

Copy 
1// 离散事件
2// discrentUpdates 在UserBlocking优先级中执行
3function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
4  flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
5  discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
6}
7
8// 阻塞事件
9function dispatchUserBlockingUpdate(
10  topLevelType,
11  eventSystemFlags,
12  nativeEvent
13) {
14  // 如果开启了enableUserBlockingEvents, 则在UserBlocking优先级中调度，
15  // 开启enableUserBlockingEvents可以防止饥饿问题，因为阻塞事件中有scroll、mouseMove这类频繁触发的事件
16  // 否则同步执行
17  if (enableUserBlockingEvents) {
18    runWithPriority(
19      UserBlockingPriority,
20      dispatchEvent.bind(null, topLevelType, eventSystemFlags, nativeEvent)
21    );
22  } else {
23    dispatchEvent(topLevelType, eventSystemFlags, nativeEvent);
24  }
25}
26
27// 可连续事件则直接同步调用dispatchEvent

Copy 
1const SimpleEventPlugin: PluginModule<MouseEvent> & {
2  getEventPriority: (topLevelType: TopLevelType) => EventPriority,
3} = {
4  eventTypes: eventTypes,
5  // 抽取事件对象
6  extractEvents: function (
7    topLevelType: TopLevelType,
8    targetInst: null | Fiber,
9    nativeEvent: MouseEvent,
10    nativeEventTarget: EventTarget
11  ): null | ReactSyntheticEvent {
12    // 事件配置
13    const dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
14
15    // 1️⃣ 根据事件类型获取SyntheticEvent子类事件构造器
16    let EventConstructor;
17    switch (topLevelType) {
18      // ...
19      case DOMTopLevelEventTypes.TOP_KEY_DOWN:
20      case DOMTopLevelEventTypes.TOP_KEY_UP:
21        EventConstructor = SyntheticKeyboardEvent;
22        break;
23      case DOMTopLevelEventTypes.TOP_BLUR:
24      case DOMTopLevelEventTypes.TOP_FOCUS:
25        EventConstructor = SyntheticFocusEvent;
26        break;
27      // ... 省略
28      case DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE:
29      // ...
30      case DOMTopLevelEventTypes.TOP_POINTER_UP:
31        EventConstructor = SyntheticPointerEvent;
32        break;
33      default:
34        EventConstructor = SyntheticEvent;
35        break;
36    }
37
38    // 2️⃣ 构造事件对象, 从对象池中获取
39    const event = EventConstructor.getPooled(
40      dispatchConfig,
41      targetInst,
42      nativeEvent,
43      nativeEventTarget
44    );
45
46    // 3️⃣ 根据DOM事件传播的顺序获取用户事件处理器
47    accumulateTwoPhaseDispatches(event);
48    return event;
49  },
50};