EventTextOnly() — react Function Reference

Architecture documentation for the EventTextOnly() function in TextNodesCase.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ EventTextOnly() — react Function Reference

Dependency Diagram

graph TD
  5ade12e2_3817_32c4_e03d_7090b6f21c1f["EventTextOnly()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  5ade12e2_3817_32c4_e03d_7090b6f21c1f -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 5ade12e2_3817_32c4_e03d_7090b6f21c1f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 315–340

function EventTextOnly() {
  return (
    <TestCase title="Event Operations - Text Only">
      <TestCase.Steps>
        <li>
          Click "Add event listener" to attach a click handler to the fragment
        </li>
        <li>Click "Dispatch click event" to dispatch a click event</li>
        <li>Observe that the fragment's event listener fires</li>
        <li>Click "Remove event listener" and dispatch again</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        Event operations (addEventListener, removeEventListener, dispatchEvent)
        work on fragments with text-only content. The event is dispatched on the
        fragment's parent element since text nodes cannot be event targets.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <EventFragmentContainer>
            This fragment contains only text. Events are handled via the parent.
          </EventFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}