What is event handling in React?
Answer
React uses synthetic events — a cross-browser wrapper around the browser's native event system. React event handlers are attached as props using camelCase names: onClick, onChange, onSubmit, onKeyDown. Pass a function reference (not a call): <button onClick={handleClick}> NOT <button onClick={handleClick()}>. The event handler receives a SyntheticEvent object with the same interface as the native event (plus React normalizations for cross-browser consistency). Preventing default: call event.preventDefault() (e.g., preventing form submission). Stopping propagation: event.stopPropagation(). Passing arguments: use an arrow function: onClick={() => handleDelete(item.id)} or bind. Event delegation: React attaches a single event listener to the root element (not each DOM node) and routes events — this is efficient and is how React's synthetic event system works under the hood. React 17+ changed event delegation from document to the React root element for better compatibility with other React trees.