[React](/courses/reactjs) provides [TypeScript](/courses/typescript) event types for common browser interactions such as input changes, form submission, button clicks, keyboard events, and focus events. In many inline handlers, [TypeScript](/courses/typescript) can infer the event automatically. ### Inline Event Inference ```tsx { console.log(event.currentTarget.value); }} /> ``` TypeScript understands that this event comes from an input element. ### Extracted Input Handler When the handler is moved into its own [function](/javascript/functions-in-javascript), explicitly typing the event is often useful: ```tsx function handleChange( event: React.ChangeEvent ) { console.log(event.currentTarget.value); } ``` Use it with: ```tsx ``` ### Textarea Events ```tsx function handleDescriptionChange( event: React.ChangeEvent ) { console.log(event.currentTarget.value); } ``` The DOM element type changes from: ```text HTMLInputElement ``` to: ```text HTMLTextAreaElement ``` ### Select Events ```tsx function handleCourseChange( event: React.ChangeEvent ) { console.log(event.currentTarget.value); } ``` ### Form Submission ```tsx function handleSubmit( event: React.FormEvent ) { event.preventDefault(); // submit form } ``` Usage: ```tsx ``` ### Button Click Events ```tsx function handleClick( event: React.MouseEvent ) { console.log(event.currentTarget.name); } ``` ### Keyboard Events ```tsx function handleKeyDown( event: React.KeyboardEvent ) { if (event.key === "Enter") { console.log("Enter pressed"); } } ``` ### Focus Events ```tsx function handleFocus( event: React.FocusEvent ) { console.log(event.currentTarget.value); } ``` ### Common Event Types ```text Input/change → React.ChangeEvent Form submission → React.FormEvent Button click → React.MouseEvent Keyboard → React.KeyboardEvent Focus/blur → React.FocusEvent ``` ### target vs currentTarget When working with typed events, `currentTarget` is often especially useful because TypeScript knows it represents the element whose handler is currently running. ```tsx function handleChange( event: React.ChangeEvent ) { const value = event.currentTarget.value; } ``` ### How Do You Find the Correct Event Type? A practical method is to first write an inline handler: ```tsx { // hover over event in your editor }} /> ``` Your editor can show the inferred type. You can then use that type when extracting the [function](/javascript/functions-in-javascript). ### Avoid any for Events Avoid: ```tsx function handleChange(event: any) { // ... } ``` because TypeScript can no longer verify which element properties are valid. ### Interview-Ready Answer [React](/courses/reactjs) provides typed event objects such as `ChangeEvent`, `FormEvent`, `MouseEvent`, `KeyboardEvent`, and `FocusEvent`. The generic type identifies the DOM element involved, for example `React.ChangeEvent`. Inline event handlers are often inferred automatically, while extracted handlers commonly benefit from explicit event types.