Defining Events on Components

    In the code example, two React events (i.e., onClick & onMouseOver) are set on React nodes (via JSX) using what looks like component props.

    Basically, React when rendering a component looks for special React prop events (e.g., ) and treats these props differently from other props (all React events shown in table below). Obviously the difference being, that eventing in the real DOM is being wired up behind the scenes.

    Part of this wiring is auto binding the context of the handler/callback to the scope of the component instance. In the code example below the value of this inside of the handlers/callbacks will reference the component instance itself.

    source code

    React supports the following events and event specific syntheticEvent properties:


















































































    Notes

    • Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word “Capture” to the end of the event name (e.g., onClick would become ).
    • React does not actually attach events to the nodes themselves, it uses event delegation.
    • Not all DOM events are provided by React. But you can still make use of them .