What are synthetic events in ReactJS ?

In order to work as a cross-browser application, React has created a wrapper same as the native browser in order to avoid creating multiple implementations for multiple methods for multiple browsers, creating common names for all events across browsers.

Prerequisites

• Javascript & DOM manupulation
• ReactJS Fundamentals

Synthetic Events

Synthetic events in React are cross-browser wrappers around the browser’s original event. Different browsers may have different names for the events. They create a uniform interface that React uses to ensure that events execute consistently across browsers. React normalizes this information to provide a consistent API for handling events regardless of the browser.

Syntax:

e.preventDefault()       // prevents all the default behavior by the browser.
e.stopPropagation()   // prevents the call to the parent component whenever a child component gets called.

Note: Here ‘e’ is a synthetic event, a cross-browser object. It is made with a wrapper around the actual event of the browser. 

Some of the attributes are:

• bubbles: Return true or false indicates event is a bubbling event or not.
• cancelable: Return true or false indicates if the event can be canceled or not.
• currentTarget: Indicates the element to which the handler is attached
• defaultPrevented: Return true or false, indicates whether the event has been canceled by preventDefault().
• eventPhase: Returns number, indicates the phase
• isTrusted: Return true when the event is generated by the user and false when by the browser/script
• type: Returns string, it indicates the type of the event

Note: Methods like preventDefault() and stopPropagation() are discussed further.

Steps to create React Application:

Step 1: Create the react project folder, open the terminal, and write the command npm create-react-app folder name.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Project Structure:

Example 1: In App.js we are creating a simple button that on click shows all the properties of the event in the console. We will see that all the above-mentioned properties there in the console.

Javascript

// App.js
function App() {
    const onClickHandler = (e) => {
        console.log(e);
    }
    return (
        <div className="App">
            <button onClick={onClickHandler}>
                Click
            </button>
        </div>
    );
}

export default App;

Output:

Example 2: Now we will understand about the two void functions: preventDefault(), stopPropagation()

Javascript

function App() {
    const handlepreventDefault = e => {
        e.preventDefault();
        console.log("clicked on preventDefault")
    }
    const handlestopPropagation = e => {
        e.stopPropagation();
        console.log("clicked on stopPropagation")
    }

    const insideDiv = (e) => {
        e.stopPropagation();
        console.log("clicked on Div")
    }
    return (
        <div className="App">
            <form>
                Type anything: <input />
                <button type="submit"
                    onClick={handlepreventDefault}>
                    preventDefault()
                </button>
                <span onClick={handlestopPropagation}>
                    stopPropagation()
                    <span onClick={insideDiv}> Inside div</span>
                </span>
                <button type="submit">submit</button>

            </form>
        </div>
    );
}

export default App;

Javascript

// index.js
body {
    margin: 0;
    font - family: -apple - system, BlinkMacSystemFont,
        'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
        'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans - serif;
    -webkit - font - smoothing: antialiased;
    -moz - osx - font - smoothing: grayscale;
}

code {
    font - family: source - code - pro, Menlo, Monaco,
        Consolas, 'Courier New', monospace;
}
button, span{
    padding: 2px 10px;
    font - size: 20px;
    border: 1px solid black;
    background - color: aliceblue;
    cursor: pointer;
}

Output: