Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

🎯 Day 52: Browser Events & Event Handling

🎯 Day 52: Browser Events & Event Handling

JavaScript can react to user interactions such as clicks, keypresses, and scrolls. This behavior is managed through the Event Model, making webpages dynamic and interactive.

🔹 Common Event Types

  • click – when a user clicks an element
  • mouseover – when mouse hovers over
  • keydown / keyup – when a key is pressed or released
  • submit – when a form is submitted
  • load – when page or image finishes loading

🔸 Adding Event Listeners

const btn = document.getElementById("clickMe");

btn.addEventListener("click", function() {
  alert("Button clicked!");
});

🔹 Event Object

Every event automatically passes an event object containing details like the element clicked, coordinates, key pressed, etc.

document.addEventListener("keydown", function(event) {
  console.log("Key pressed:", event.key);
});

🔸 Removing Event Listeners

function showMessage() {
  alert("Clicked!");
}
btn.addEventListener("click", showMessage);
btn.removeEventListener("click", showMessage);

💡 Event Delegation

Instead of attaching multiple listeners to each element, use event delegation on a parent element. 

document.querySelector("ul").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("You clicked:", e.target.innerText);
  }
});

🧪 Try it Yourself

Comments

Post a Comment