Careeroza

Synthetic Events

What is a SyntheticEvent?

React wraps the browser's native event in a SyntheticEvent object. It has the same interface (target, preventDefault(), stopPropagation()) and behaves the same in every browser. The original is available as e.nativeEvent.

Example

export default function App() {
  const handleClick = (e) => {
    console.log('type:', e.type, '| tag:', e.target.tagName, '| native:', e.nativeEvent.constructor.name);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('form submit prevented');
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="button" onClick={handleClick}>Click me</button>
      <button type="submit">Submit</button>
    </form>
  );
}

Result