extractEvents() — react Function Reference

Architecture documentation for the extractEvents() function in DOMPluginEventSystem.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 6

Entity Profile

BabelCompiler→ Validation→ extractEvents() — react Function Reference

Dependency Diagram

graph TD
  e68ee20d_0906_0494_d1c4_4f9c91467ead["extractEvents()"]
  816b54e5_c63c_f8b2_68e8_0c637e281f03["DOMPluginEventSystem.js"]
  e68ee20d_0906_0494_d1c4_4f9c91467ead -->|defined in| 816b54e5_c63c_f8b2_68e8_0c637e281f03
  9a8085d6_7398_0661_fca1_1af88d83ebe8["dispatchEventsForPlugins()"]
  9a8085d6_7398_0661_fca1_1af88d83ebe8 -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  28a876ba_5723_6438_1f13_a75a6758eb3f["extractEvents()"]
  28a876ba_5723_6438_1f13_a75a6758eb3f -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  44ab0e04_cfdc_c2cb_fa50_605ef3be17ac["extractEvents()"]
  44ab0e04_cfdc_c2cb_fa50_605ef3be17ac -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  4aec19a3_29c8_bb6a_c13b_8823cc60b026["extractEvents()"]
  4aec19a3_29c8_bb6a_c13b_8823cc60b026 -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  883c6b61_d9b7_7c94_1745_bb9ecdd3ccdb["extractEvents()"]
  883c6b61_d9b7_7c94_1745_bb9ecdd3ccdb -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  d0287fd0_244e_8562_5b35_de5bd863db97["extractEvents()"]
  d0287fd0_244e_8562_5b35_de5bd863db97 -->|calls| e68ee20d_0906_0494_d1c4_4f9c91467ead
  4aec19a3_29c8_bb6a_c13b_8823cc60b026["extractEvents()"]
  e68ee20d_0906_0494_d1c4_4f9c91467ead -->|calls| 4aec19a3_29c8_bb6a_c13b_8823cc60b026
  style e68ee20d_0906_0494_d1c4_4f9c91467ead fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/DOMPluginEventSystem.js lines 102–203

function extractEvents(
  dispatchQueue: DispatchQueue,
  domEventName: DOMEventName,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: null | EventTarget,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
) {
  // TODO: we should remove the concept of a "SimpleEventPlugin".
  // This is the basic functionality of the event system. All
  // the other plugins are essentially polyfills. So the plugin
  // should probably be inlined somewhere and have its logic
  // be core the to event system. This would potentially allow
  // us to ship builds of React without the polyfilled plugins below.
  SimpleEventPlugin.extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  const shouldProcessPolyfillPlugins =
    (eventSystemFlags & SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS) === 0;
  // We don't process these events unless we are in the
  // event's native "bubble" phase, which means that we're
  // not in the capture phase. That's because we emulate
  // the capture phase here still. This is a trade-off,
  // because in an ideal world we would not emulate and use
  // the phases properly, like we do with the SimpleEvent
  // plugin. However, the plugins below either expect
  // emulation (EnterLeave) or use state localized to that
  // plugin (BeforeInput, Change, Select). The state in
  // these modules complicates things, as you'll essentially
  // get the case where the capture phase event might change
  // state, only for the following bubble event to come in
  // later and not trigger anything as the state now
  // invalidates the heuristics of the event plugin. We
  // could alter all these plugins to work in such ways, but
  // that might cause other unknown side-effects that we
  // can't foresee right now.
  if (shouldProcessPolyfillPlugins) {
    EnterLeaveEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer,
    );
    ChangeEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer,
    );
    SelectEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer,
    );
    BeforeInputEventPlugin.extractEvents(
      dispatchQueue,
      domEventName,
      targetInst,
      nativeEvent,
      nativeEventTarget,
      eventSystemFlags,
      targetContainer,
    );
    FormActionEventPlugin.extractEvents(