Handling DOM Events in JavaScript

Day 17/100 of JavaScript Today’s topic: DOM Events (deeper understanding) Events allow JavaScript to respond to user interactions and system actions 🔹Adding events btn.addEventListener("click", handleClick); function handleClick() { console.log("Clicked"); } 🔹Event flow Events follow two phases: - Capturing (top → down) - Bubbling (bottom → up) btn.addEventListener("click", handler, true); // capturing btn.addEventListener("click", handler); // bubbling 🔹Event object btn.addEventListener("click", (e) => { console.log(e.target); // actual clicked element console.log(e.currentTarget); // element with listener }); 🔹Event delegation Handling events at parent instead of multiple children parent.addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); 🔹Prevent default behavior form.addEventListener("submit", (e) => { e.preventDefault(); }); #Day17 #JavaScript #100DaysOfCode

🧠 Day 3 of 21 days challenge JavaScript Event Loop 🤯 Event Loop is a mechanism in JavaScript that handles execution of asynchronous code. It continuously checks the call stack and callback queue. If the stack is empty, it moves tasks from the queue to the stack for execution. For example :- console.log("Start"); console.log("End"); console.log("Timeout"); Wait… why this order? Because JavaScript doesn’t run everything instantly. It uses: • Call Stack • Web APIs • Callback Queue Event Loop decides what runs next. 💤For easy understanding :- Event Loop = decides execution order Sync code runs first Async code waits in queue Then runs after the stack is empty 👉 That’s why “Timeout” runs last This changed how I understand async code 🚀 #JavaScript #EventLoop #Async

🧠 Day 4 of 21 days challenge JavaScript Hoisting 🤯 // var → undefined // let/const → error Why different behavior? Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their scope before execution. Only declarations are hoisted, not initializations. For easy understanding :- Hoisting = moving declarations to top var is hoisted with undefined let & const are hoisted but not initialized 👉 That’s why var gives undefined but let/const give error For example :- Normal code : console.log(score); // undefined var score = 90; JS will do this internally: var score; // first reserve console.log(score); // undefined score = 90; // then assign value This changed how I understand variable behavior 🚀 #JavaScript #Hoisting #Frontend

Day 19/100 of JavaScript 🚀 Today’s topic : Deep dive into DOM Going beyond basic manipulation — focusing on performance, rendering, and efficient updates 🔹Reflow & Repaint - Reflow → layout recalculation (expensive) - Repaint → visual update without layout change Frequent DOM changes can trigger multiple reflows and slow down performance 🔹Minimizing reflows const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const el = document.createElement("p"); el.textContent = i; fragment.appendChild(el); } document.body.appendChild(fragment); 🔹Caching DOM queries const list = document.getElementById("list"); // reuse instead of querying again list.appendChild(newItem); 🔹Layout thrashing❌ Reading and writing layout repeatedly can hurt performance el.style.width = "100px"; console.log(el.offsetWidth); // forces reflow 🔹Efficient updates - Batch DOM changes - Use class changes instead of multiple style updates - Avoid unnecessary re-rendering DOM manipulation is not just about changing elements, but doing it efficiently to maintain performance #Day19 #JavaScript #100DaysOfCode

Day 14/100 of JavaScript Today’s topic : Introduction to DOM The DOM (Document Object Model) represents the HTML structure of a web page as a tree of objects JavaScript can use the DOM to access and manipulate elements dynamically 🔹Selecting elements const heading = document.getElementById("title"); const items = document.querySelectorAll(".item"); 🔹Changing content heading.textContent = "Updated Title"; 🔹Changing styles heading.style.color = "blue"; 🔹Adding elements const newEl = document.createElement("p"); newEl.textContent = "New paragraph"; document.body.appendChild(newEl); 🔑 Key understanding: The DOM allows JavaScript to interact with HTML and update the UI dynamically without reloading the page #Day14 #JavaScript #100DaysOfCode

Today’s practice was all about understanding how DOM manipulation really works in JavaScript. I worked on deleting elements dynamically using event handling. At first, it looked simple — just use "remove()" and done. But while practicing, I discovered an important edge case. When using "event.target.parentNode.remove()", it works perfectly when clicking on the intended element (like an image inside a list). But if you click outside the expected target, it can remove the wrong parent — even the entire list. To fix this, I implemented a condition to ensure deletion only happens when the clicked element is the correct one ("IMG" tag). This small practice helped me understand: • The difference between "event.target" and "event.currentTarget" • How DOM structure affects behavior • Why adding conditions makes code safer Every small bug teaches something valuable. #JavaScript #DOM #FrontendDevelopment #LearningInPublic #WebDevelopment

Day 5 of My JavaScript Journey 🚀 Today, I learned about if/else statements and type conversion in JavaScript. The if/else statement is used to control the flow of a program based on conditions. Example: if (age > 18) { console.log("Adult"); } else { console.log("Not an adult"); } I also learned about type conversion and coercion. • Type conversion is when we manually change a value from one type to another. • Type coercion is when JavaScript automatically converts types behind the scenes. For example: "5" + 2 = "52" (coercion happens) One thing that stood out to me: JavaScript can behave unexpectedly if you don’t understand type coercion. Key takeaway: Always be mindful of data types when writing conditions and operations. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

Day 13/100 of JavaScript Missed a day, but continuing the streak Today’s topic: Call Stack and Event Loop JavaScript is single-threaded, which means it executes one task at a time using a call stack - Call Stack → manages function execution (LIFO) - Functions are pushed when called and popped after execution For asynchronous operations, JavaScript uses: - Web APIs - Callback Queue / Microtask Queue - Event Loop Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); console.log("End"); Output: Start End Timeout Even with 0 delay, "setTimeout" executes later because it goes through the event loop The event loop ensures asynchronous tasks are executed only when the call stack is empty No matter the delay, consistency continues #Day13 #JavaScript #100DaysOfCode

🔁 Why does this print 4, 4, 4 — and not 1, 2, 3? One of the most common JavaScript interview questions, and it all comes down to one thing: the event loop. Look at this: for (var i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } What I expected when I started with Javascript: 1 2 3 What we actually get: 4 4 4 Why? 😓 😓 😓 JavaScript is single-threaded. When the loop runs, it doesn't pause and wait for setTimeout to fire. Instead, each callback gets placed in the task queue and runs only after the call stack is completely empty. So by the time any callback runs, the loop is already done — and i has already been incremented to 4. The callbacks don't hold a copy of i. They all share a reference to the same var i. And that i is now 4. But swap var for let — and suddenly it prints :1, 2, 3. Why? 😓 for (let i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } let is block-scoped. Each iteration of the loop gets its own brand new i( Imagine this , let is a self-centered guy who likes to live in his own bubble) So each callback closes over a separate variable — one holding 1, one holding 2, one holding 3. When the callbacks eventually run from the task queue, they each find their own i — untouched. var shares one variable across the whole loop. let creates a fresh one per iteration. That's the entire difference. #javascript #eventloop

#JourneyToTechJob – Day 8 🚀 #50DaysOfRevision Built a simple Traffic Light Simulator using JavaScript. Features: ✔️ Switch between Red, Yellow, and Green lights ✔️ Dynamic UI updates using DOM manipulation ✔️ Button-based interactions What I revised: → Event handling in JavaScript → DOM manipulation → Writing cleaner and reusable functions 🔗 Live Demo: https://lnkd.in/g-Qnknr4 Here's a quick demo of the project👇 #SoftwareDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #Projects #BuildInPublic #Consistency #50DaysOfCodeChallenge