Events in ReactJS
In ReactJS, events are similar to HTML DOM events like onclick, onchange, etc. However, React has its own event handling system called Synthetic Events which wraps the native events for cross-browser compatibility.
✅ Handling Events in ReactJS
You can handle events using event handlers like onClick, onChange, onSubmit, etc.
📌 1. Handling Click Events
Example:
<button <div> <button onClick={handleClick}>Click Me</button>;};export default App;
Ternary Operator → Conditional logic using
? :.
✅ Common ReactJS Events
| Event | Description | Example Usage |
|---|---|---|
onClick | Click event | <button onClick={fn}> |
onChange | Input or select change | <input onChange={fn}> |
onSubmit | Form submission | <form onSubmit={fn}> |
onMouseEnter | Mouse hover | <div onMouseEnter={fn}> |
onKeyDown | Key press | <input onKeyDown={fn}> |
onFocus | Input focus | <input onFocus={fn}> |
onBlur | Input blur | <input onBlur={fn}> |
✅ Final Thoughts
Use functional components with hooks for simplicity.
Use arrow functions for event handlers to avoid binding issues.
Use event objects to extract useful information from the event.
