dispatchEvent() — react Function Reference

Architecture documentation for the dispatchEvent() function in ReactDOMEventListener.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 2

Entity Profile

BabelCompiler→ Validation→ dispatchEvent() — react Function Reference

Dependency Diagram

graph TD
  a88f3f22_dc1b_e053_dff6_69dfe164d116["dispatchEvent()"]
  59469541_eb24_2e4d_9b1d_8719abe8ae49["ReactDOMEventListener.js"]
  a88f3f22_dc1b_e053_dff6_69dfe164d116 -->|defined in| 59469541_eb24_2e4d_9b1d_8719abe8ae49
  2ba22029_28ca_8137_22a5_dd256f0a527f["dispatchDiscreteEvent()"]
  2ba22029_28ca_8137_22a5_dd256f0a527f -->|calls| a88f3f22_dc1b_e053_dff6_69dfe164d116
  1365560e_ef11_e38f_e013_8a7830a0d56c["dispatchContinuousEvent()"]
  1365560e_ef11_e38f_e013_8a7830a0d56c -->|calls| a88f3f22_dc1b_e053_dff6_69dfe164d116
  1be3a0b7_80ec_6d97_2d85_4a67f64ff80b["dispatchEventForPluginEventSystem()"]
  a88f3f22_dc1b_e053_dff6_69dfe164d116 -->|calls| 1be3a0b7_80ec_6d97_2d85_4a67f64ff80b
  style a88f3f22_dc1b_e053_dff6_69dfe164d116 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/ReactDOMEventListener.js lines 157–235

export function dispatchEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent,
): void {
  if (!_enabled) {
    return;
  }

  let blockedOn = findInstanceBlockingEvent(nativeEvent);
  if (blockedOn === null) {
    dispatchEventForPluginEventSystem(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      return_targetInst,
      targetContainer,
    );
    clearIfContinuousEvent(domEventName, nativeEvent);
    return;
  }

  if (
    queueIfContinuousEvent(
      blockedOn,
      domEventName,
      eventSystemFlags,
      targetContainer,
      nativeEvent,
    )
  ) {
    nativeEvent.stopPropagation();
    return;
  }
  // We need to clear only if we didn't queue because
  // queueing is accumulative.
  clearIfContinuousEvent(domEventName, nativeEvent);

  if (
    eventSystemFlags & IS_CAPTURE_PHASE &&
    isDiscreteEventThatRequiresHydration(domEventName)
  ) {
    while (blockedOn !== null) {
      const fiber = getInstanceFromNode(blockedOn);
      if (fiber !== null) {
        attemptSynchronousHydration(fiber);
      }
      const nextBlockedOn = findInstanceBlockingEvent(nativeEvent);
      if (nextBlockedOn === null) {
        dispatchEventForPluginEventSystem(
          domEventName,
          eventSystemFlags,
          nativeEvent,
          return_targetInst,
          targetContainer,
        );
      }
      if (nextBlockedOn === blockedOn) {
        break;
      }
      blockedOn = nextBlockedOn;
    }
    if (blockedOn !== null) {
      nativeEvent.stopPropagation();
    }
    return;
  }

  // This is not replayable so we'll invoke it but without a target,
  // in case the event system needs to trace it.
  dispatchEventForPluginEventSystem(
    domEventName,
    eventSystemFlags,
    nativeEvent,
    null,
    targetContainer,
  );
}