Drills Repository
7 Drills · All Belts · events
Inline arrow event handlers
Passing an arrow function to an event prop hands React a callable reference rather than executing the code immediately. The onClick={() => alert('Clicked!')} handler works because React stores that function and calls it only when the button is actually clicked.
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.
Passing e.target to a FormData Constructor
TypeScript narrows e.currentTarget to the exact element type a listener is attached to, since that element is guaranteed to be the one registered, while e.target stays typed as the broader EventTarget because the event may have bubbled from any descendant. Switching to e.currentTarget resolves the FormData type error because the form itself, not a bubbled child, is what handleSubmit needs.
Nested onClick Handlers Both Firing
Most DOM events bubble upward from the element they originate on through each ancestor element in turn. Clicking the button fires its own onClick handler first, and the event then bubbles up to trigger the parent div's onClick handler too.
Custom event handler prop names
Custom component props are just JavaScript identifiers, so an author can name an event-handler prop anything, though the on-prefix convention signals its purpose. Passing onSmash into <button onClick={onSmash}> works because the button's own onClick expects a function, and onSmash is simply that function under a custom name.
stopPropagation behavior
Calling stopPropagation on an event stops it from continuing to bubble upward through ancestor event listeners, so parent handlers attached higher in the tree never receive that particular event. It has no effect on the browser's own default behavior for the element or on how React schedules component re-renders.
preventDefault behavior
Calling e.preventDefault() inside an event handler stops the browser from performing that event's default action, such as reloading the page after a form submission. It's distinct from e.stopPropagation(), which only stops the event from bubbling to parent handlers and has no effect on the browser's own default behavior.