Defining Events in JSX

    Below is the none JSX way of adding an event to a React node (example from Previous chapter, section 4.7):

    The above code written using JSX:

    source code

    Note that we are using the brackets to connect a JS function to an event (i.e., onMouseOver={mouseOverHandler}). This style of adding events to nodes mimics the (Don’t worry, just mimics, does not really create inline events in the DOM).

    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 event name (e.g., would become onClickCapture).
    • React does not actually attach events to the nodes themselves, it uses .
    • Not all DOM events are provided by React. But you can still make use of them using React lifecycle methods.