四月八日

class Draggable extends React.Component<DraggableProps, DraggableState> {
  //可选属性
  static propTypes = {
    allowAnyClick: PropTypes.bool, //任意鼠标键可以拖动
    disabled: PropTypes.bool, // 禁止拖动
    enableUserSelectHack: PropTypes.bool, //如果禁止页面元素可以被选择无效,可以使用这个属性
    offsetParent: PropTypes.HTMLElement, // 计算初始偏移量的时候会相对于这个元素
    grid: PropTypes.arrayOf(PropTypes.number), //以网格的形式移动元素
    handle: PropTypes.string, // 指定元素可拖动的区域
    cancel: PropTypes.string, //指定元素不能拖动的区域
    nodeRef: PropTypes.object, //用于直接指定那个元素可以被拖动
    onStart: PropTypes.func, //自定义拖动开始时的回调函数
    onDrag: PropTypes.func, //自定义拖动中的回调函数
    onStop: PropTypes.func, //自定义拖动结束时候的回调函数
    onMouseDown: PropTypes.func,
    scale: PropTypes.number, // 拖动时候的偏移比例
    axis: PropTypes.oneOf(["both", "x", "y", "none"]), //指明可拖动的方向轴
    // 拖动边界
    bounds: PropTypes.oneOfType([
      PropTypes.shape({
        left: PropTypes.number,
        right: PropTypes.number,
        top: PropTypes.number,
        bottom: PropTypes.number,
      }),
      PropTypes.string,
      PropTypes.oneOf([false]),
    ]),
    //自定义拖动时候的样式
    defaultClassName: PropTypes.string,
    defaultClassNameDragging: PropTypes.string,
    defaultClassNameDragged: PropTypes.string,
    // 默认位置
    defaultPosition: PropTypes.shape({
      x: PropTypes.number,
      y: PropTypes.number,
    }),
    // 默认偏移量
    positionOffset: PropTypes.shape({
      x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    }),
  };
  // 初始化状态
  constructor(props: DraggableProps) {
    super(props);
    this.state = {
      dragging: false,
      dragged: false,
      x: props.position ? props.position.x : props.defaultPosition.x,
      y: props.position ? props.position.y : props.defaultPosition.y,
      prevPropsPosition: { ...props.position },
      // 用于计算在边界外的拖动
      slackX: 0,
      slackY: 0,
      isElementSVG: false,
    };
  }

  // 如果组件是受控的,检查新传入的值时候与上一次更新时候的值不同,避免组件频繁更新
  static getDerivedStateFromProps(
    { position }: DraggableProps,
    { prevPropsPosition }: DraggableState
  ): ?$Shape<DraggableState> {
    if (
      position &&
      (!prevPropsPosition ||
        position.x !== prevPropsPosition.x ||
        position.y !== prevPropsPosition.y)
    ) {
      return {
        x: position.x,
        y: position.y,
        prevPropsPosition: { ...position },
      };
    }
    return null;
  }
  findDOMNode() {}
  // 预处理用户提供的事件绑定方法
  // 其他的事件属性与这个类似
  onDragStart(e, coreData) {
    // 创建一个事件对象,返回给使用者
    const shouldStart = this.props.onStart(
      e,
      createDraggableData(this, coreData)
    );
    // 如果绑定方法返回 false,那么同样放回false,在实际调用时停止程序执行
    if (shouldStart === false) return false;
    //标记状态, 表示拖动开始
    this.setState({ dragging: true, dragged: true });
  }
  onDrag() {
    // Draggable 中的状态与 DraggableCore 中的状态是区分开的
    if (!this.state.dragging) return false;

    // 在这里处理边界问题和偏移量比例的问题
    // 相当于把用户的自定义配置影响分离出来,DraggableCore 只处理核心拖拽的问题
    function createDraggableData(draggable, coreData) {
      const scale = draggable.props.scale;
      return {
        node: coreData.node,
        x: draggable.state.x + coreData.deltaX / scale,
        y: draggable.state.y + coreData.deltaY / scale,
        deltaX: coreData.deltaX / scale,
        deltaY: coreData.deltaY / scale,
        lastX: draggable.state.x,
        lastY: draggable.state.y,
      };
    }
    const uiData = createDraggableData(this, coreData);

    const newState: $Shape<DraggableState> = {
      x: uiData.x,
      y: uiData.y,
    };

    // Keep within bounds.
    if (this.props.bounds) {
      // Save original x and y.
      const { x, y } = newState;

      // Add slack to the values used to calculate bound position. This will ensure that if
      // we start removing slack, the element won't react to it right away until it's been
      // completely removed.
      newState.x += this.state.slackX;
      newState.y += this.state.slackY;

      const [newStateX, newStateY] = getBoundPosition(
        this,
        newState.x,
        newState.y
      );
      newState.x = newStateX;
      newState.y = newStateY;

      // Recalculate slack by noting how much was shaved by the boundPosition handler.
      newState.slackX = this.state.slackX + (x - newState.x);
      newState.slackY = this.state.slackY + (y - newState.y);

      // Update the event we fire to reflect what really happened after bounds took effect.
      uiData.x = newState.x;
      uiData.y = newState.y;
      uiData.deltaX = newState.x - this.state.x;
      uiData.deltaY = newState.y - this.state.y;
    }

    // Short-circuit if user's callback killed it.
    const shouldUpdate = this.props.onDrag(e, uiData);
    if (shouldUpdate === false) return false;

    this.setState(newState);
  }
  onDragStop() {}
  render() {
    return (
      <DraggableCore
        {...draggableCoreProps}
        onStart={this.onDragStart}
        onDrag={this.onDrag}
        onStop={this.onDragStop}
      >
        {React.cloneElement(React.Children.only(children), {
          className: className,
          style: { ...children.props.style, ...style },
          transform: svgTransform,
        })}
      </DraggableCore>
    );
  }
}

class DraggableCore extends React.Component<
  DraggableCoreProps,
  DraggableCoreState
> {
  componentDidMount() {
    this.mounted = true;
    // 组件挂载时去查找需要挂载的元素,并绑定事件
    const thisNode = this.findDOMNode();
    // 因为移动短的touch 事件可能会让屏幕发生滚动,所以必须通过原生事件绑定传入 passive 参数
    if (thisNode) {
      addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, {
        passive: false,
      });
    }
  }
  findDOMNode(): ?HTMLElement {
    return this.props?.nodeRef
      ? this.props?.nodeRef?.current
      : ReactDOM.findDOMNode(this);
  }

  handleDragStart() {}
  handleDrag() {}
  handleDragStop() {}
  // 在组件上绑定下面四个方法,当方法被触发时,可以区分是否是触摸设备
  onMouseDown() {
    const eventsFor = {
      touch: {
        start: "touchstart",
        move: "touchmove",
        stop: "touchend",
      },
      mouse: {
        start: "mousedown",
        move: "mousemove",
        stop: "mouseup",
      },
    };
    dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
    return this.handleDragStart(e);
  }
  onMouseUp() {}
  onTouchStart() {}
  onTouchEnd() {}
}

function getBoundPosition(
  draggable: Draggable,
  x: number,
  y: number
): [number, number] {
  // If no bounds, short-circuit and move on
  if (!draggable.props.bounds) return [x, y];

  // Clone new bounds
  let { bounds } = draggable.props;
  bounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
  const node = findDOMNode(draggable);

  if (typeof bounds === "string") {
    const { ownerDocument } = node;
    const ownerWindow = ownerDocument.defaultView;
    let boundNode;
    if (bounds === "parent") {
      boundNode = node.parentNode;
    } else {
      boundNode = ownerDocument.querySelector(bounds);
    }
    if (!(boundNode instanceof ownerWindow.HTMLElement)) {
      throw new Error(
        'Bounds selector "' + bounds + '" could not find an element.'
      );
    }
    const boundNodeEl: HTMLElement = boundNode; // for Flow, can't seem to refine correctly
    const nodeStyle = ownerWindow.getComputedStyle(node);
    const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
    // Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
    bounds = {
      left:
        -node.offsetLeft +
        int(boundNodeStyle.paddingLeft) +
        int(nodeStyle.marginLeft),
      top:
        -node.offsetTop +
        int(boundNodeStyle.paddingTop) +
        int(nodeStyle.marginTop),
      right:
        innerWidth(boundNodeEl) -
        outerWidth(node) -
        node.offsetLeft +
        int(boundNodeStyle.paddingRight) -
        int(nodeStyle.marginRight),
      bottom:
        innerHeight(boundNodeEl) -
        outerHeight(node) -
        node.offsetTop +
        int(boundNodeStyle.paddingBottom) -
        int(nodeStyle.marginBottom),
    };
  }

  // Keep x and y below right and bottom limits...
  if (isNum(bounds.right)) x = Math.min(x, bounds.right);
  if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom);

  // But above left and top limits.
  if (isNum(bounds.left)) x = Math.max(x, bounds.left);
  if (isNum(bounds.top)) y = Math.max(y, bounds.top);

  return [x, y];
}

const handleDragStart: EventHandler<MouseTouchEvent> = (e) => {
  // 用于自定义的 onMouseDown 事件
  this.props.onMouseDown(e);

  // 任意鼠标按键都一颗拖动,否则只有鼠标左键可以拖动
  if (
    !this.props.allowAnyClick &&
    typeof e.button === "number" &&
    e.button !== 0
  )
    return false;

  // 查找到需要拖动的元素
  const thisNode = this.findDOMNode();
  if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
    throw new Error("<DraggableCore> not mounted on DragStart!");
  }
  const { ownerDocument } = thisNode;

  // 控制可拖动区域和不可拖动区域
  // handle cancel 属性传入的是控制区域的元素标签名称
  // 用原生的 matches 方法检查这个标签是否在拖动元素的内部,如果有就停止执行  element.matches('p')
  // 这是真正的 onStart 方法还没有执行,不需要重置状态
  if (
    this.props.disabled ||
    !(e.target instanceof ownerDocument.defaultView.Node) ||
    (this.props.handle &&
      !matchesSelectorAndParentsTo(e.target, this.props.handle, thisNode)) ||
    (this.props.cancel &&
      matchesSelectorAndParentsTo(e.target, this.props.cancel, thisNode))
  ) {
    return;
  }

  // Prevent scrolling on mobile devices, like ipad/iphone.
  // Important that this is after handle/cancel.
  if (e.type === "touchstart") e.preventDefault();

  // Set touch identifier in component state if this is a touch event. This allows us to
  // distinguish between individual touches on multitouch screens by identifying which
  // touchpoint was set to this element.
  // 记录触摸点的 id
  const touchIdentifier = getTouchIdentifier(e);
  this.setState({ touchIdentifier });

  // Get the current drag point from the event. This is used as the offset.
  // 首先如果存在触摸点,则回去touch 事件,否则获取原生的 event
  // 通过 findDOMNode 查找需要拖动的元素, 获取用于计算相对位置的元素 offsetParent 如果没有这个属性就用上级 parentNode || document
  // const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
  // const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
  // 获取相对于父元素的鼠标位置
  const position = getControlPosition(e, touchIdentifier, this);
  if (position == null) return; // not possible but satisfies flow
  const { x, y } = position;

  // Create an event object with all the data parents need to make a decision here.
  const coreEvent = createCoreData(this, x, y);

  // 真正执行 onStart 方法
  const shouldUpdate = this.props.onStart(e, coreEvent);
  // 如果返回值为false 停止执行
  if (shouldUpdate === false || this.mounted === false) return;

  // Add a style to the body to disable user-select. This prevents text from
  // being selected all over the page.
  if (this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument);

  // Initiate dragging. Set the current x and y as offsets
  // so we know how much we've moved during the drag. This allows us
  // to drag elements around even if they have been moved, without issue.
  this.setState({
    dragging: true,

    lastX: x,
    lastY: y,
  });

  // Add events to the document directly so we catch when the user's mouse/touch moves outside of
  // this element. We use different events depending on whether or not we have detected that this
  // is a touch-capable device.
  addEvent(ownerDocument, dragEventFor.move, this.handleDrag);
  addEvent(ownerDocument, dragEventFor.stop, this.handleDragStop);
};

const handleDrag: EventHandler<MouseTouchEvent> = (e) => {
  // Get the current drag point from the event. This is used as the offset.
  const position = getControlPosition(e, this.state.touchIdentifier, this);
  if (position == null) return;
  let { x, y } = position;

  // 实现按网格拖动
  if (Array.isArray(this.props.grid)) {
    let deltaX = x - this.state.lastX,
      deltaY = y - this.state.lastY;
    const deltaX = Math.round(deltaX / this.props.grid[0]) * this.props.grid[0];
    const deltaY = Math.round(deltaY / this.props.grid[0]) * this.props.grid[0];
    if (!deltaX && !deltaY) return; // skip useless drag
    (x = this.state.lastX + deltaX), (y = this.state.lastY + deltaY);
  }

  const coreEvent = createCoreData(this, x, y);

  // Call event handler. If it returns explicit false, trigger end.
  // 指定自定义方法,如果返回 false 手动停止执行
  const shouldUpdate = this.props.onDrag(e, coreEvent);
  if (shouldUpdate === false || this.mounted === false) {
    try {
      // $FlowIgnore
      this.handleDragStop(new MouseEvent("mouseup"));
    } catch (err) {}
    return;
  }

  this.setState({
    lastX: x,
    lastY: y,
  });
};

const handleDragStop: EventHandler<MouseTouchEvent> = (e) => {
  if (!this.state.dragging) return;

  const position = getControlPosition(e, this.state.touchIdentifier, this);
  if (position == null) return;
  let { x, y } = position;

  // Snap to grid if prop has been provided
  if (Array.isArray(this.props.grid)) {
    let deltaX = x - this.state.lastX || 0;
    let deltaY = y - this.state.lastY || 0;
    [deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
    (x = this.state.lastX + deltaX), (y = this.state.lastY + deltaY);
  }

  const coreEvent = createCoreData(this, x, y);

  // Call event handler
  const shouldContinue = this.props.onStop(e, coreEvent);
  if (shouldContinue === false || this.mounted === false) return false;

  const thisNode = this.findDOMNode();
  if (thisNode) {
    // Remove user-select hack
    if (this.props.enableUserSelectHack)
      removeUserSelectStyles(thisNode.ownerDocument);
  }

  // 重置状态并移除事件
  // Reset the el.
  this.setState({
    dragging: false,
    lastX: NaN,
    lastY: NaN,
  });

  if (thisNode) {
    // Remove event handlers
    removeEvent(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
    removeEvent(thisNode.ownerDocument, dragEventFor.stop, this.handleDragStop);
  }
};

export default class App extends React.Component {
  state = {
    show: false,
  };
  ref = React.createRef();
  componentDidMount() {
    const that = this;
    document.addEventListener("click", () => {
      that.setState({ show: false });
      console.log("document");
    });
    this.ref.current.addEventListener("click", () => {
      console.log("ref");
    });
  }
  render() {
    return (
      <div
        ref={this.ref}
        onClick={() => this.setState({ show: true }, console.log("dom"))}
      >
        点击 {this.state.show ? "show" : "null"}
      </div>
    );
  }
}

import React from "react";

export default class App extends React.Component {
  parentRef = React.createRef();
  childRef = React.createRef();
  componentDidMount() {
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log("父元素原生事件捕获");
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log("父元素原生事件冒泡");
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log("子元素原生事件捕获");
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log("子元素原生事件冒泡");
    });
    document.addEventListener(
      "click",
      () => {
        console.log("document 捕获");
      },
      true
    );
    document.addEventListener("click", () => {
      console.log("document 冒泡");
    });
  }
  parentBubble = () => {
    console.log("父组件React事件冒泡");
  };
  parenteCapture = () => {
    console.log("父组件React事件捕获");
  };
  childBubble = () => {
    console.log("子组件React事件冒泡");
  };
  childeCapture = () => {
    console.log("子组件React事件捕获");
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.parentBubble}
        onClickCapture={this.parenteCapture}
      >
        <p
          ref={this.childRef}
          onClick={this.childBubble}
          onClickCapture={this.childeCapture}
        >
          事件
        </p>
      </div>
    );
  }
}

document.addEventListener("click", dispatchEvent);
function dispatchEvent(event) {
  let paths = [];
  let current = event.target;
  while (current) {
    paths.push(current);
    current = current.parentNode;
  }
  for (let i = paths.length - 1; i >= 0; i--) {
    let handle = paths[i].onClickCapture;
    handle && handle();
  }
  for (let i = 0; i < paths.length; i++) {
    let handle = paths[i].onClick;
    handle && handle();
  }
}

function dispatchEvent(event, useCapture) {
  let paths = [];
  let current = event.target;
  while (current) {
    paths.push(current);
    current = current.parentNode;
  }
  if (useCapture) {
    for (let i = paths.length - 1; i >= 0; i--) {
      let handle = paths[i].onClickCapture;
      handle && handle();
    }
  } else {
    for (let i = 0; i < paths.length; i++) {
      let handle = paths[i].onClick;
      handle && handle();
    }
  }
}
root.addEventListener("click", (e) => dispatchEvent(e, true), true);
root.addEventListener("click", (e) => dispatchEvent(e, false));

SimpleEventPlugin.registerEvents();
EnterLeaveEventPlugin.registerEvents();
ChangeEventPlugin.registerEvents();
SelectEventPlugin.registerEvents();
BeforeInputEventPlugin.registerEvents();

var topLevelEventsToReactNames = new Map();
//                              click       onClick
function registerSimpleEvent(domEventName, reactName) {
  topLevelEventsToReactNames.set(domEventName, reactName);
  registerTwoPhaseEvent(reactName, [domEventName]);
}

function registerTwoPhaseEvent(registrationName, dependencies) {
  registerDirectEvent(registrationName, dependencies);
  registerDirectEvent(registrationName + "Capture", dependencies);
}

function registerDirectEvent(registrationName, dependencies) {
  // 合成事件和原生事件的对应关系 {onAbort:['abort']}
  registrationNameDependencies[registrationName] = dependencies;

  {
    var lowerCasedName = registrationName.toLowerCase();

    // 内部用于验证事件的对象,保存的是驼峰命名和非驼峰命名之间的关系  {onclick:onClick}
    possibleRegistrationNames[lowerCasedName] = registrationName;

    if (registrationName === "onDoubleClick") {
      possibleRegistrationNames.ondblclick = registrationName;
    }
  }
  //所有原生事件名称的 set 集合 set([click,cancel])
  for (var i = 0; i < dependencies.length; i++) {
    allNativeEvents.add(dependencies[i]);
  }
}

function listenToAllSupportedEvents(rootContainerElement) {
  allNativeEvents.forEach(function (domEventName) {
    // 特殊处理,这个方法只会在 document 上
    if (domEventName !== "selectionchange") {
      // 排除那些没有冒泡阶段的事件
      if (!nonDelegatedEvents.has(domEventName)) {
        listenToNativeEvent(domEventName, false, rootContainerElement);
      }
      listenToNativeEvent(domEventName, true, rootContainerElement);
    }
  });

  ownerDocument[listeningMarker] = true;
  listenToNativeEvent("selectionchange", false, ownerDocument);
}

function listenToNativeEvent(domEventName, isCapturePhaseListener, target) {
  var eventSystemFlags = 0;

  // 添加捕获阶段的标识
  if (isCapturePhaseListener) {
    eventSystemFlags |= IS_CAPTURE_PHASE;
  }

  addTrappedEventListener(
    target,
    domEventName,
    eventSystemFlags,
    isCapturePhaseListener
  );
}

function addTrappedEventListener(
  targetContainer,
  domEventName,
  eventSystemFlags,
  isCapturePhaseListener,
  isDeferredListenerForLegacyFBSupport
) {
  // 创建事件回调函数
  var listener = createEventListenerWrapperWithPriority(
    targetContainer,
    domEventName,
    eventSystemFlags
  );

  var isPassiveListener = undefined;
  // 是否支持 passive 参数
  // addEventListener 第三个参数可以写为一个对象 { capture: false, once: true,passive:true }
  // capture 表示冒泡阶段执行还是捕获阶段执行
  // once 标识绑定事件只会执行一次就被移除
  // passive 是否执行默认事件,有些默认事件和浏览器行为绑定比如移动端 touchstart 会触发浏览器滚动
  // 如果使用 event.preventDefault() 会调用函数后才会停止默认行为, 可以使用 passive:false 直接阻止默认行为
  if (passiveBrowserEventsSupported) {
    if (
      domEventName === "touchstart" ||
      domEventName === "touchmove" ||
      domEventName === "wheel"
    ) {
      isPassiveListener = true;
    }
  }

  targetContainer = targetContainer;
  var unsubscribeListener;

  // 利用 addEventListener 绑定事件监听函数

  if (isCapturePhaseListener) {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      unsubscribeListener = addEventCaptureListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  } else {
    if (isPassiveListener !== undefined) {
      unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
        targetContainer,
        domEventName,
        listener,
        isPassiveListener
      );
    } else {
      unsubscribeListener = addEventBubbleListener(
        targetContainer,
        domEventName,
        listener
      );
    }
  }
}

function getEventPriority(domEventName) {
  switch (domEventName) {
    // Used by SimpleEventPlugin:
    case "cancel":
    case "click":
    case "close":
    case "contextmenu":
    case "copy":
    case "cut":
    case "auxclick":
    case "dblclick":
    case "dragend":
    case "dragstart":
    case "drop":
    case "focusin":
    case "focusout":
    case "input":
    case "invalid":
    case "keydown":
    case "keypress":
    case "keyup":
    case "mousedown":
    case "mouseup":
    case "paste":
    case "pause":
    case "play":
    case "pointercancel":
    case "pointerdown":
    case "pointerup":
    case "ratechange":
    case "reset":
    case "resize":
    case "seeked":
    case "submit":
    case "touchcancel":
    case "touchend":
    case "touchstart":
    case "volumechange": // Used by polyfills:
    // eslint-disable-next-line no-fallthrough

    case "change":
    case "selectionchange":
    case "textInput":
    case "compositionstart":
    case "compositionend":
    case "compositionupdate": // Only enableCreateEventHandleAPI:
    // eslint-disable-next-line no-fallthrough

    case "beforeblur":
    case "afterblur": // Not used by React but could be by user code:
    // eslint-disable-next-line no-fallthrough

    case "beforeinput":
    case "blur":
    case "fullscreenchange":
    case "focus":
    case "hashchange":
    case "popstate":
    case "select":
    case "selectstart":
      return DiscreteEventPriority;

    case "drag":
    case "dragenter":
    case "dragexit":
    case "dragleave":
    case "dragover":
    case "mousemove":
    case "mouseout":
    case "mouseover":
    case "pointermove":
    case "pointerout":
    case "pointerover":
    case "scroll":
    case "toggle":
    case "touchmove":
    case "wheel": // Not used by React but could be by user code:
    // eslint-disable-next-line no-fallthrough

    case "mouseenter":
    case "mouseleave":
    case "pointerenter":
    case "pointerleave":
      return ContinuousEventPriority;

    case "message": {
      // We might be in the Scheduler callback.
      // Eventually this mechanism will be replaced by a check
      // of the current priority on the native scheduler.
      var schedulerPriority = getCurrentPriorityLevel();

      switch (schedulerPriority) {
        case ImmediatePriority:
          return DiscreteEventPriority;

        case UserBlockingPriority:
          return ContinuousEventPriority;

        case NormalPriority:
        case LowPriority:
          // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
          return DefaultEventPriority;

        case IdlePriority:
          return IdleEventPriority;

        default:
          return DefaultEventPriority;
      }
    }

    default:
      return DefaultEventPriority;
  }
}

function createEventListenerWrapperWithPriority(
  targetContainer,
  domEventName,
  eventSystemFlags
) {
  var eventPriority = getEventPriority(domEventName);
  var listenerWrapper;

  switch (eventPriority) {
    case DiscreteEventPriority:
      listenerWrapper = dispatchDiscreteEvent;
      break;

    case ContinuousEventPriority:
      listenerWrapper = dispatchContinuousEvent;
      break;

    case DefaultEventPriority:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }

  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer
  );
}

batchedUpdates(function () {
  return dispatchEventsForPlugins(
    domEventName, // 事件名称
    eventSystemFlags, // 捕获阶段标识
    nativeEvent, // 原生事件对象
    ancestorInst
  );
});

function dispatchEventsForPlugins(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  targetInst,
  targetContainer
) {
  var nativeEventTarget = getEventTarget(nativeEvent);
  var dispatchQueue = [];

    //  内部调用不同的处理函数,用于处理没有原生事件对应的 React 事件,例如 onBeforeInput
    // if (shouldProcessPolyfillPlugins) {
    //     extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents$1(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents$3(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    //     extractEvents(dispatchQueue, domEventName, targetInst, nativeEvent, nativeEventTarget);
    // }
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags
  );
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

function extractEvents(
  dispatchQueue,
  domEventName,
  targetInst,
  nativeEvent,
  nativeEventTarget,
  eventSystemFlags,
  targetContainer
) {
  // 不同的事件类型,对应不同的合成事件构造函数
  // 内部实现 preventDefault stopPropagation
  switch (domEventName) {
    case "click":
      SyntheticEventCtor = SyntheticMouseEvent;
    case "drag":
      SyntheticEventCtor = SyntheticDragEvent;
  }

  // 从当前节点循环遍历到根节点, 收集所有上级节点中绑定当前方法的节点和它的绑定函数
  var _listeners = accumulateSinglePhaseListeners(
    targetInst,
    reactName,
    nativeEvent.type,
    inCapturePhase,
    accumulateTargetOnly
  );

  if (_listeners.length > 0) {
    // Intentionally create event lazily.
    var _event = new SyntheticEventCtor(
      reactName,
      reactEventType,
      null,
      nativeEvent,
      nativeEventTarget
    );

    dispatchQueue.push({
      event: _event,
      listeners: _listeners,
    });
  }
}

function processDispatchQueue(dispatchQueue, eventSystemFlags) {
  var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;

  // 循环事件队列,依次触发合成事件
  for (let i = 0; i < dispatchQueue.length; i++) {
    const {event, listeners} = dispatchQueue[i];
    var previousInstance;

    (function processDispatchQueueItemsInOrder(
      event: ReactSyntheticEvent,
      dispatchListeners: Array<DispatchListener>,
      inCapturePhase: boolean
    ): void {
      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;
        }
      }
    }
  })()

  rethrowCaughtError();
}