React实现合成事件的源码分析

// 对应方法 `ReactDOM.createRoot()
function createRoot(container, CreateRootOptions) {
  const rootContainerElement =
    container.nodeType === COMMENT_NODE
      ? (container.parentNode: any)
      : container;

  // 绑定支持的事件
  listenToAllSupportedEvents(rootContainerElement);
}

function listenToAllSupportedEvents(rootContainerElement) {
  allNativeEvents.forEach(domEventName => {
    // 是否为会冒泡的事件
    if (!nonDelegatedEvents.has(domEventName)) {
      // 第二个参数是 isCapturePhaseListener
      // false 表示绑定在 “冒泡阶段”
      listenToNativeEvent(domEventName, false, rootContainerElement);
    }
    listenToNativeEvent(domEventName, true, rootContainerElement); 
  }
}

function listenToNativeEvent() {
  const listener = dispatchEvent.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer,
  );

  if (isCapturePhaseListener) {
    // 捕获阶段的事件委托
    targetContainer.addEventListener(domEventName, listener, true);  
  } else {
    // 冒泡阶段的事件委托
    targetContainer.addEventListener(domEventName, listener, false); 
  }
}

function dispatchEventForPluginEventSystem(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer,
) {
  batchedUpdates(() =>
    dispatchEventsForPlugins(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      ancestorInst,
      targetContainer,
    ),
  );
}

function dispatchEventsForPlugins(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer,
) {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue = [];
  // 1. 找到所有需要执行的事件
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  // 2. 按一定顺序执行
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

function extractEvents(...) {
  SimpleEventPlugin.extractEvents(...);

  if (shouldProcessPolyfillPlugins) {
    EnterLeaveEventPlugin.extractEvents(...);
    ChangeEventPlugin.extractEvents(...);
    SelectEventPlugin.extractEvents(...);
    BeforeInputEventPlugin.extractEvents(...);
  }
}

// 这个 extractEvents 是 SimpleEventPlugin 下的方法
function extractEvents(
  dispatchQueue,
  domEventName,
  targetInst,
  nativeEvent,
  nativeEventTarget,
  eventSystemFlags,
  targetContainer,
) {
  // 先默认一个合成对象构造函数
  let SyntheticEventCtor = SyntheticEvent;
  switch (domEventName) {
    // ...
    case 'mousedown':
      // 构造函数替换为 合成鼠标事件构造函数
      SyntheticEventCtor = SyntheticMouseEvent;
      break;
  }
  
  // 是否为捕获阶段
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  
  // 递归找到所有的 listeners
  const listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly,
    nativeEvent,
  );
  // 实例化合成事件对象，后面要传到 listener 里
  const event = new SyntheticEventCtor(
    reactName,
    reactEventType,
    null,
    nativeEvent,
    nativeEventTarget,
  );
  // 给队列加上 合成对象实例，和 listeners
  dispatchQueue.push({event, listeners});
}

export function processDispatchQueue(dispatchQueue, eventSystemFlags) {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  for (let i = 0; i < dispatchQueue.length; i++) {
    // 取出不同的事件
    const {event, listeners} = dispatchQueue[i];
    // 每个事件的 listeners 按一定顺序执行
    processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
  }
}

function processDispatchQueueItemsInOrder(event, dispatchListeners, inCapturePhase) {
  let previousInstance;
  if (inCapturePhase) {
    // 捕获阶段为逆序
    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const { instance, currentTarget, listener } = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
    // 冒泡阶段为顺序
    for (let i = 0; i < dispatchListeners.length; i++) {
      const { instance, currentTarget, listener } = dispatchListeners[i];
      // 是否中断冒泡
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}