React | Synthetic Event interface

Question

TLDR

What is bubbles , cancelable , defaultPrevented , eventPhase , isTrusted , timestamp , type in SyntheticEvent and how can I use it

Answer

Hello, I'm react and react native developer.
When I studied about SyntheticEvent in react today, I had a question about this interface SyntheticEvent

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent              // I know it is original browser dom event
void preventDefault()             // I know it is for prevent element basic event like a tag
boolean isDefaultPrevented()      // I guess it is for knowing is preventDefault() is executed 
void stopPropagation()            // I know it is for stop event bubbling and capturing
boolean isPropagationStopped()    // I guess it is for knowing is stopPropagation() is executed
void persist()                    // It is for persist synthetic event pooling
DOMEventTarget target             // I know target means dom event target like 
number timeStamp
string type

So at this situation, I have no idea what is bubbles , cancelable , defaultPrevented , eventPhase , isTrusted , timestamp , type and how can we use this interface.

Is there any good use case with this?

Answer 1

Most of these are inherited from native Event .

You can read about them in the MDN doc .

You can also read about specific SyntheticEvent stuff here .