What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser's native event. Its API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers. The native events can be accessed directly from synthetic events using nativeEvent attribute.

Let's take an example of BookStore title search component with the ability to get all native event properties

    function BookStore() {
      function handleTitleChange(e) {
        console.log("The new title is:", e.target.value);
        console.log('Synthetic event:', e); // React SyntheticEvent
        console.log('Native event:', e.nativeEvent); // Browser native event
        e.stopPropagation();
        e.preventDefault();
      }

      return <input name="title" onChange={handleTitleChange} />;
    }
    

List of common synthetic events are:

• onClick
• onChange
• onSubmit
• onKeyDown, onKeyUp
• onFocus, onBlur
• onMouseEnter, onMouseLeave
• onTouchStart, onTouchEnd