// 檢票事件
var event = new Event('check-ticket');
// 事件注冊(cè)，并編寫(xiě)回調(diào)
elem.addEventListener('check-ticket', function (e) { 
  // 開(kāi)始排隊(duì)
  LiningUp()
});
// 事件觸發(fā)，廣播開(kāi)始檢票
elem.dispatchEvent(event);

// HTML中的寫(xiě)法
<button onclick="handleClick()">
  Activate Lasers
</button>
// React中的寫(xiě)法
<button onClick={handleClick}>
  Activate Lasers
</button>

function setInitialDOMProperties(
  tag: string,
  domElement: Element,
  rootContainerElement: Element | Document,
  nextProps: Object,
  isCustomComponentTag: boolean,
): void {
  for (const propKey in nextProps) {
    if (!nextProps.hasOwnProperty(propKey)) {
      ...
    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
        // 如果propKey屬于事件類(lèi)型，則進(jìn)行事件綁定
        ensureListeningTo(rootContainerElement, propKey, domElement);
      }
    }
  }
}
// registrationNameDependencies為合成事件名和真實(shí)事件的映射，格式如下：
{
  onChange: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
  onChangeCapture: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
  onClick: ['click']
}

export function createEventListenerWrapperWithPriority(
  targetContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
): Function {
  const eventPriority = getEventPriorityForPluginSystem(domEventName);
  let listenerWrapper;
  switch (eventPriority) {
    case DiscreteEvent:
      listenerWrapper = dispatchDiscreteEvent;
      break;
    case UserBlockingEvent:
      listenerWrapper = dispatchUserBlockingUpdate;
      break;
    case ContinuousEvent:
    default:
      listenerWrapper = dispatchEvent;
      break;
  }
  return listenerWrapper.bind(
    null,
    domEventName,
    eventSystemFlags,
    targetContainer,
  );
}

function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue: DispatchQueue = [];
  // 通過(guò)不同事件類(lèi)型插件進(jìn)行事件對(duì)象合成，將合成事件放入事件隊(duì)列中：dispatchQueue中
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  // 執(zhí)行dispatchQueue中具體事件執(zhí)行路徑下的事件
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

// 通過(guò)extractEvents合成的dispatchQueue的格式如下
[
  {
    // event是合成事件對(duì)象
    event, 
    // 具體的事件執(zhí)行路徑，currentTarget、listener等信息
    listeners: [
      {
        currentTarget: div.counter,
        instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
        listener: e => {…}
      }，
      {
        currentTarget: div.counter-parent,
        instance: FiberNode {tag: 5, key: null, elementType: 'div', type: 'div', stateNode: div.counter, …},
        listener: e => {…}
      }
    ] 
  }
]

function processDispatchQueueItemsInOrder(
  event: ReactSyntheticEvent,
  dispatchListeners: Array<DispatchListener>,
  inCapturePhase: boolean,
): void {
  let previousInstance;
?
  if (inCapturePhase) {
    // 事件捕獲倒序循環(huán)
    for (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      // 執(zhí)行事件，傳入event對(duì)象，和currentTarget
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  } else {
    // 事件冒泡正序循環(huán)
    for (let i = 0; i < dispatchListeners.length; i++) {
      const {instance, currentTarget, listener} = dispatchListeners[i];
      // 如果事件對(duì)象阻止了冒泡，則return掉循環(huán)過(guò)程
      if (instance !== previousInstance && event.isPropagationStopped()) {
        return;
      }
      executeDispatch(event, listener, currentTarget);
      previousInstance = instance;
    }
  }
}