Hello Dev Community! 👋
It is officially Day 23 of my journey to master the MERN stack! Today, I wrapped up Lecture 8 of Apna College's JavaScript playlist with Shradha Didi, focusing on the ultimate way to handle user interactions: Event Listeners and the Event Object.
Yesterday, I noticed that standard event handlers like btn.onclick overwrite previous code. Today, I unlocked the professional solution to that problem.
🧠 Key Learnings From JS Lecture 8 (Part 2)
Here is the exact logical breakdown of the concepts I mastered today:
1. The Event Object (e)
I learned that whenever an event occurs, the browser automatically passes a special object full of data into our function—usually named e or evt.
-
e.type: Tells us exactly what event happened (e.g.,"click"or"mouseover"). -
e.target: Points to the exact HTML element that triggered the action. This is incredibly useful for tracking down user behavior dynamically!
2. Event Listeners (addEventListener)
This is the professional standard for web engineering. By using element.addEventListener("event", callback), we can listen for actions cleanly. The best part? We can attach multiple event listeners to the exact same element without anything getting overwritten!
3. Removing Listeners (removeEventListener)
I learned that we can also stop listening to actions using removeEventListener. A crucial rule Shradha Didi shared is that to remove a listener, the callback function must be stored in a variable so that its exact memory reference can be passed in.
🛠️ What I Actually Built (The Big Highlight!)
Today, I built a real-world, industry-standard feature: A Dark Mode / Light Mode Theme Toggle.
- Created a button on the webpage.
- Attached an
addEventListener("click", ...)to it. - Tracked the current state inside a variable (
currMode). - Styled separate
.darkand.lightbackground/text rules in CSS. - Used
.classList.add()and.classList.remove()inside the script to smoothly swap the entire webpage appearance back and forth based on the user's click.
Watching the entire UI shift from a clean white layout to a sleek dark theme with a single click felt absolutely incredible!
🎯 My Goal for Tomorrow (Day 24 / Project Day)
I have successfully wrapped up all the foundational DOM and Event lectures from Apna College. Tomorrow, it's time to test my memory and logic layout:
- Building a full standalone mini-project using HTML, CSS, and vanilla JavaScript events.
- Practicing clean code modularity.
💬 Let's Connect!
To the Apna College community: Did you implement your theme toggle using simple inline styling changes or by toggling CSS classes via classList? To seniors: Do you still use e.target heavily when handling complex forms?
My complete theme toggle repository is live on GitHub!
[Links in the Comments]
Keep learning, keep building! 🚀
Top comments (0)