Analyse des Quellcodes des React-Ereignismechanismus

Funktion createRootImpl(
  Container: Container,
  tag: RootTag,
  Optionen: void | RootOptions,
) {
  // ...
  const rootContainerElement =
        container.nodeType === COMMENT_NODE ? container.parentNode : Container;
  // Auf alle unterstützten Ereignisse achten listenToAllSupportedEvents(rootContainerElement);
  // ...
}

Exportfunktion listenToAllSupportedEvents(rootContainerElement: EventTarget) {
  allNativeEvents.fürEach(domEventName => {
    // Ereignisse ausschließen, die keine Delegierung erfordern, wenn (!nonDelegatedEvents.has(domEventName)) {
      // Blase listenToNativeEvent(
        domEreignisname,
        FALSCH,
        ((rootContainerElement: beliebig): Element),
        null,
      );
    }
    // Erfassen Sie „listenToNativeEvent“ (
      domEreignisname,
      WAHR,
      ((rootContainerElement: beliebig): Element),
      null,
    );
  });
}

Exportfunktion listenToNativeEvent(
  domEventName: DOMEventName,
  isCapturePhaseListener: boolesch,
  rootContainerElement: EventTarget,
  targetElement: Element | null,
  eventSystemFlags?: EventSystemFlags = 0,
): Leere {
  let Ziel = rootContainerElement;
	// ...
  // Speichern Sie ein Set im DOM-Element, um die Ereignisse zu identifizieren, auf die das aktuelle Element wartet. const listenerSet = getEventListenerSet(target);
  // Ereignisidentifikationsschlüssel, Verarbeitung der Zeichenfolgenverkettung const listenerSetKey = getListenerSetKey(
    domEreignisname,
    istCapturePhaseListener,
  );

  wenn (!listenerSet.has(listenerSetKey)) {
    // Als erfasst markieren, wenn (isCapturePhaseListener) {
      eventSystemFlags |= IS_CAPTURE_PHASE;
    }
    // Bind-Ereignis addTrappedEventListener(
      Ziel,
      domEreignisname,
      Ereignissystemflaggen,
      istCapturePhaseListener,
    );
    // Zum Set hinzufügen
    listenerSet.add(listenerSetKey);
  }
}

Funktion addTrappedEventListener(
  ZielContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  isCapturePhaseListener: boolesch,
  isDeferredListenerForLegacyFBSupport?: boolesch,
) {
  // Holen Sie sich den entsprechenden Listener entsprechend der Priorität
  let listener = createEventListenerWrapperWithPriority(
    ZielContainer,
    domEreignisname,
    Ereignissystemflaggen,
  );

  wenn (isCapturePhaseListener) {
    addEventCaptureListener(Zielcontainer, DomEventName, Listener);
  } anders {
    addEventBubbleListener(Zielcontainer, DomEventName, Listener);
  }
}

export const nonDelegatedEvents: Set<DOMEventName> = neues Set([
  'stornieren',
  'schließen',
  'ungültig',
  'laden',
  'scrollen',
  'Umschalten',
  ...Medienereignistypen,
]);
exportiere const mediaEventTypes: Array<DOMEventName> = [
  'abbrechen',
  'kann spielen',
  'kanndurchspielen',
  'Daueränderung',
  'geleert',
  'verschlüsselt',
  'beendet',
  'Fehler',
  'geladene Daten',
  „geladene Metadaten“,
  'Ladestart',
  'Pause',
  'spielen',
  'spielen',
  'Fortschritt',
  'Ratenänderung',
  'gesucht',
  'suchend',
  'in die Blockade geraten',
  'aussetzen',
  'Zeitaktualisierung',
  'Lautstärkeänderung',
  'Warten',
];

Exportfunktion setInitialProperties(
  domElement: Element,
  Tag: Zeichenfolge,
  rawProps: Objekt,
  rootContainerElement: Element | Dokument,
): Leere {
  let-Requisiten: Objekt;
  Schalter (Tag) {
    // ...
    Fall 'Video':
    Fall 'Audio':
      für (let i = 0; i < mediaEventTypes.length; i++) {
        listenToNonDelegatedEvent(mediaEventTypes[i], domElement);
      }
      Requisiten = Rohprops;
      brechen;
    Standard:
      Requisiten = Rohprops;
  }
  // DOM-Attribute festlegen, etwa Stil …
  setInitialDOMProperties(
    Etikett,
    domElement,
    rootContainerElement,
    Requisiten,
    istCustomComponentTag,
  );
}

Exportfunktion listenToNonDelegatedEvent(
  domEventName: DOMEventName,
  Zielelement: Element,
): Leere {
  const isCapturePhaseListener = false;
  const listenerSet = getEventListenerSet(targetElement);
  const listenerSetKey = getListenerSetKey(
    domEreignisname,
    istCapturePhaseListener,
  );
  wenn (!listenerSet.has(listenerSetKey)) {
    addTrappedEventListener(
      Zielelement,
      domEreignisname,
      IS_NON_DELEGATED,
      istCapturePhaseListener,
    );
    listenerSet.add(listenerSetKey);
  }
}

Exportfunktion createEventListenerWrapperWithPriority(
  ZielContainer: EventTarget,
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
): Funktion {
  // Ereignispriorität aus der integrierten Map abrufen const eventPriority = getEventPriorityForPluginSystem(domEventName);
  lass listenerWrapper;
  //Gibt unterschiedliche Listener entsprechend unterschiedlicher Prioritäten zurück
  Schalter (Ereignispriorität) {
    Fall DiscreteEvent:
      listenerWrapper = DispatchDiskretesEreignis;
      brechen;
    Fall UserBlockingEvent:
      listenerWrapper = dispatchUserBlockingUpdate;
      brechen;
    Fall ContinuousEvent:
    Standard:
      listenerWrapper = DispatchEvent;
      brechen;
  }
  returniere listenerWrapper.bind(
    null,
    domEreignisname,
    Ereignissystemflaggen,
    ZielContainer,
  );
}

Funktion fn(
  domEreignisname,
  Ereignissystemflaggen,
  Container,
  nativesEreignis,
) {
  //...
}

Exportfunktion dispatchEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  ZielContainer: EventTarget,
  nativeEvent: Jedes nativeEvent,
): Leere {
  // ...
  // Ereignis „tryToDispatchEvent“ auslösen (
    domEreignisname,
    Ereignissystemflaggen,
    ZielContainer,
    nativesEreignis,
  );
  // ...
}

Funktion dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: Jedes nativeEvent,
  targetInst: null | Faser,
  ZielContainer: EventTarget,
): Leere {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const dispatchQueue: DispatchQueue = [];
  //Sammle Listener, um sprudelnde extractEvents zu simulieren(
    Versandwarteschlange,
    domEreignisname,
    ZielInst,
    nativesEreignis,
    nativesEventTarget,
    Ereignissystemflaggen,
    ZielContainer,
  );
  //Ausführungswarteschlange processDispatchQueue(dispatchQueue, eventSystemFlags);
}

Funktion extractEvents(
  dispatchQueue: Versandwarteschlange,
  domEventName: DOMEventName,
  targetInst: null | Faser,
  nativeEvent: Jedes nativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  ZielContainer: EventTarget,
): Leere {
  const reactName = topLevelEventsToReactNames.get(domEventName);
  lassen Sie SyntheticEventCtor = SyntheticEvent;
  Lassen Sie reactEventType: Zeichenfolge = domEventName;
	//Erstelle unterschiedliche synthetische Ereignisse entsprechend den unterschiedlichen Ereignissen switch (domEventName) {
    Fall 'Tastendruck':
    Fall 'Taste gedrückt':
    Fall 'keyup':
      SyntheticEventCtor = SynthetischesTastaturereignis;
      brechen;
    Fall 'Klick':
    // ...
    Fall 'mouseover':
      SyntheticEventCtor = SynthetischesMausereignis;
      brechen;
    Fall 'ziehen':
    // ...
    Fall 'drop':
      SyntheticEventCtor = SynthetischesDragEvent;
      brechen;
    // ...
    Standard:
      brechen;
  }
  // ...
  // Sammeln Sie Zuhörer auf jeder Ebene
  const listeners = acquireSinglePhaseListeners(
    ZielInst,
    reagierenName,
    nativeEvent.Typ,
    inCapturePhase,
    NurZielakkumulieren,
  );
  wenn (Listeners.Länge > 0) {
    // Ein synthetisches Ereignis erstellen const event = new SyntheticEventCtor(
      Reaktionsname,
      reagierenEventType,
      null,
      nativesEreignis,
      nativesEventTarget,
    );
    dispatchQueue.push({Ereignis, Zuhörer});
  }
}

Exportfunktion acquireSinglePhaseListeners(
  targetFiber: Faser | null,
  reactName: Zeichenfolge | null,
  nativeEventType: Zeichenfolge,
  inCapturePhase: Boolesch,
  acquireTargetOnly: Boolesch,
): Array<DispatchListener> {
  const captureName = reactName !== null ? reactName + 'Capture' : null;
  const reactEventName = inCapturePhase? captureName: reactName;
  const listeners: Array<DispatchListener> = [];

  lass Instanz = Zielfaser;
  let lastHostComponent = null;

  // Durchlaufe den Fiber-Knoten, der das Ereignis auslöst, um DOM und Listener zu sammeln
  während (Instanz !== null) {
    const {stateNode, tag} = Instanz;
    // Nur HostComponents haben Listener (also <div>)
    wenn (tag === HostComponent && stateNode !== null) {
      letzteHostkomponente = Statusknoten;

      wenn (reactEventName !== null) {
        // Holen Sie die eingehende Ereignis-Listener-Funktion von den Props auf dem Fiber-Knoten const listener = getListener(instance, reactEventName);
        wenn (listener != null) {
          listeners.push({
            Beispiel,
            Hörer,
            aktuellesZiel: letzteHostkomponente,
          });
        }
      }
    }
    wenn (NurZiel akkumulieren) {
      brechen;
    }
    // Weiter nach obeninstance = instance.return;
  }
  Zuhörer zurückgeben;
}

Exportfunktion processDispatchQueue(
  dispatchQueue: Versandwarteschlange,
  eventSystemFlags: EventSystemFlags,
): Leere {
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  für (lass i = 0; i < dispatchQueue.length; i++) {
    const {Ereignis, Listener} = dispatchQueue[i];
    processDispatchQueueItemsInOrder(Ereignis, Listener, inCapturePhase);
  }
}

Funktion processDispatchQueueItemsInOrder(
  Ereignis: ReactSyntheticEvent,
  dispatchListeners: Array<DispatchListener>,
  inCapturePhase: Boolesch,
): Leere {
  lass vorherige Instanz;
  // Erfassen, wenn (inCapturePhase) {
    für (let i = dispatchListeners.length - 1; i >= 0; i--) {
      const {Instanz, aktuelles Ziel, Listener} = dispatchListeners[i];
      wenn (Instanz !== vorherigeInstanz und Ereignis.isPropagationStopped()) {
        zurückkehren;
      }
      executeDispatch(Ereignis, Listener, aktuellesZiel);
      vorherigeInstanz = Instanz;
    }
  } anders {
  // Blase für (let i = 0; i < dispatchListeners.length; i++) {
      const {Instanz, aktuelles Ziel, Listener} = dispatchListeners[i];
      wenn (Instanz !== vorherigeInstanz und Ereignis.isPropagationStopped()) {
        zurückkehren;
      }
      executeDispatch(Ereignis, Listener, aktuellesZiel);
      vorherigeInstanz = Instanz;
    }
  }
}

Funktion ExecuteDispatch (
  Ereignis: ReactSyntheticEvent,
  Listener: Funktion,
  aktuellesZiel: Ereignisziel,
): Leere {
  const Typ = Ereignistyp || 'unbekanntes Ereignis';
  event.currentTarget = aktuellesZiel;
  Listener (Ereignis);
  Ereignis.aktuellesZiel = null;
}

<div native onClick={(e)=>{e.stopPropagation()}}>
  <div onClick={()=>{console.log("synthetisches Ereignis")}}>synthetisches Ereignis</div>
</div>