The object your handler receives is not the browser's event. It is a SyntheticEvent, a wrapper with the same interface — type, target, currentTarget, preventDefault(), stopPropagation() — that behaves identically in every browser. The original is one property away, as e.nativeEvent, and the two do not map one to one: inside onMouseLeave, e.nativeEvent is a mouseout event.
React 7,897 does not attach a listener to your <button>. It attaches one listener per event type to the root container you passed to createRoot; when an event arrives there, React walks the fiber tree to find which components were involved and calls their handlers in capture-then-bubble order.
| Family | Handlers | What it adds |
|---|---|---|
| Mouse | onClick, onMouseEnter | clientX, button, shiftKey |
| Keyboard | onKeyDown, onKeyUp | key, code, repeat |
| Focus | onFocus, onBlur | relatedTarget |
| Form | onChange, onSubmit | target.value |
| Pointer | onPointerDown, onPointerUp | pointerId, pressure |
target is the element the event started on; currentTarget is the one whose handler is running. In focus events relatedTarget is the element losing focus, which is how you tell "focus moved between two children of this panel" from "focus left the panel": test e.currentTarget.contains(e.relatedTarget).