Listing 7-4: Viewing the properties of the Event object

function EventProps(){
    const logClick=(e)=>{
        console.dir(e);
    }
    return(
        <button onClick={logClick}>Click Me</button>
    )
}

export default EventProps;

React's Synthetic Events

Over the years, web browsers have developed slightly different ways of handling events. To eliminate these differences, it's common for JavaScript libraries and frameworks to wrap the browser's native events in a cross-browser abstraction layer. React's cross-browser event handling system is call Synthetic Events.

Except for the fact that it works the same in every browser, Synthetic Events works the same as the native browser event handling.

Open the JavaScript console and click the above button to see the properties of the SyntheticBaseEvent object.