Q14: How do React Synthetic Events work and how do they differ from native DOM events?
React wraps browser native events inside cross-browser SyntheticEvent wrapper instances to guarantee property consistency across browsers. React uses Event Delegation, attaching single top-level event listeners to the root DOM container (#root in React 17+) rather than attaching listeners to individual DOM nodes.
Accessing Native Events from Synthetic Events
function FormComponent() {
const handleSubmit = (event) => {
event.preventDefault(); // SyntheticEvent method
console.log('Native Event Target:', event.nativeEvent.target); // Access underlying native DOM event
};
return <form onSubmit={handleSubmit}><button>Submit</button></form>;
}💡 event is a SyntheticEvent object, while event.nativeEvent exposes the underlying browser DOM Event object.
Key Takeaways
- Cross-browser normalized event wrapper around browser native events.
- Uses Event Delegation registered at the root React DOM container.
Knowledge Check
Where does React 17+ attach event listeners under its Event Delegation model?