22 Day of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 22 of my journey toward mastering the MERN stack! After learning how to create and style elements dynamically, today I stepped into the absolute core of webpage interactivity by starting Lecture 8 of Apna College's JavaScript playlist with Shradha Didi: Events.

Up until today, our webpage was passive—it just sat there. Today, I learned how to make the page react whenever a user interacts with it!

---

🧠 Key Learnings From JS Lecture 8 (Event Handling)

An event is a signal that something has happened on the webpage (like a user clicking a button, hovering over an image, or typing in an input field). I explored two main ways to handle these signals today:

1. Inline Event Handling

Writing JavaScript triggers directly inside HTML tags (e.g., <button onclick="console.log('clicked')">). However, Shradha Didi explained why this is a bad practice because it mixes logic with structure, making the HTML messy and hard to maintain.

2. JavaScript Event Handling (The Clean Way)

The professional standard is to select the element in our script file and assign an event function to it. It looks like this:

javascript
let btn = document.querySelector("#myBtn");
btn.onclick = () => {
    console.log("Button was clicked cleanly!");
};