Drills Repository
7 Drills · All Belts · events
Passing vs calling event handlers
React event handlers expect a function reference so React can invoke it later when the event occurs. Writing onClick={handleClick} passes the function itself, whereas handleClick() would execute it immediately during rendering.
Inline arrow event handlers
The arrow function itself is passed as the event handler. React stores that function reference and executes it later when the user clicks the button.
stopPropagation behavior
e.stopPropagation() prevents the current event from continuing upward through ancestor event handlers during bubbling. It has no effect on the browser's default action or on component rendering.
preventDefault behavior
e.preventDefault() stops the browser's default action associated with an event, such as a form submission reloading the page. stopPropagation() only affects event bubbling and does not prevent default behavior.
Event propagation bubbling
In React, most events bubble upward from the clicked element through ancestor elements. The button handler runs first, then the parent <div> handler executes during propagation.
Custom event handler prop names
Custom React components may name event handler props however they like, although names usually start with on by convention. Only built-in DOM elements like <button> require standard browser event names such as onClick.
e.target vs e.currentTarget - TypeScript Knows the Type of currentTarget but Not target
TypeScript can narrow e.currentTarget to the exact element type the handler is attached to, since that element is guaranteed to be the one that registered the listener, but e.target is only typed as the broader EventTarget because the event may have bubbled up from any descendant. Switching from e.target to e.currentTarget resolves the type error because it correctly reflects that the form itself, not a bubbled child, is what the handler needs.