Event Handling

🧩 What Are Events in React?

Events in React are just like events in regular HTML (e.g., click, submit, change), but with a few key differences:

• React wraps events in a synthetic event system (SyntheticEvent)
• Uses camelCase instead of lowercase (e.g., onClick not onclick)
• You pass functions, not strings, as handlers

💡 React events are designed to work identically across all browsers.

---

🔧 Key Differences (React vs HTML)

HTML	React
onclick="handleClick()"	onClick={handleClick}
String-based	Function-based
Lowercase	CamelCase
Native DOM events	React SyntheticEvent

---

✅ Basic Event Handling Example

🔍 Explanation:

• onClick is the event
• handleClick is the function that gets called when the event happens

---

🔁 List of Common React Events

Event Type	React Prop	Triggered When...
Click	onClick	Element is clicked
Change	onChange	Form field value changes
Submit	onSubmit	Form is submitted
Mouse Enter	onMouseEnter	Mouse enters an element
Mouse Leave	onMouseLeave	Mouse leaves an element
Key Down	onKeyDown	Key is pressed down
Focus	onFocus	Element receives focus
Blur	onBlur	Element loses focus

---

🧪 Example: Form Input with onChange

➡️ e.target.value gives the current value of the input field.

---

📥 Example: Form Submit with onSubmit

---

⚙️ Passing Arguments to Event Handlers

---

🧠 React SyntheticEvent

React wraps all browser events in a SyntheticEvent to ensure consistency across browsers.

---

🔐 Event Handling Best Practices

✅ Do's	❌ Don'ts
Use camelCase (onClick, onSubmit)	Avoid lowercase (onclick)
Pass a function reference	Avoid calling directly (onClick={func()})
Use preventDefault() for forms	Don’t let forms reload the page
Use arrow functions to pass args	Avoid inline logic in JSX

---

📌 Summary

Feature	Description
Event Name	Use camelCase like onClick, onChange
Event Handler	Pass a function (not a string)
Event Object	Access via e in function
Custom Args	Use arrow functions to pass arguments
SyntheticEvent	React’s cross-browser wrapper for DOM events