DOM Events in JavaScript: Capturing, Bubbling, and Delegation

Day 16/100 of JavaScript Today’s topic : DOM Events After understanding DOM structure, the next step is handling user interactions using events JavaScript can listen to events and respond to user actions like clicks, typing, or scrolling 🔹Adding event listener const btn = document.getElementById("btn"); btn.addEventListener("click", () => { console.log("Button clicked"); }); 🔹Common events - click - input - submit - keydown 🔹Event object btn.addEventListener("click", (event) => { console.log(event.target); }); 🔹Event bubbling (basic idea) Events propagate from child → parent unless stopped event.stopPropagation(); DOM events allow JavaScript to make web pages interactive by responding to user actions #Day16 #JavaScript #100DaysOfCode

Day 23/100 of JavaScript Today’s topic : "this" keyword "this" refers to the object that is currently executing the function But its value depends on how the function is called, not where it is written 🔹In object method const user = { name: "Apsar", greet() { console.log(this.name); } }; user.greet(); // Apsar 🔹In regular function function show() { console.log(this); } show(); // global object (or undefined in strict mode) 🔹Arrow function const obj = { name: "Apsar", greet: () => { console.log(this.name); } }; obj.greet(); // undefined 👉 Arrow functions don’t have their own "this", they inherit it 🔹call, apply, bind function greet() { console.log(this.name); } const user = { name: "Apsar" }; greet.call(user); #Day23 #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

🧠 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 20/100 of JavaScript Today’s topic : Debouncing vs Throttling Both are techniques used to control how frequently a function executes, especially during high-frequency events like typing, scrolling, or resizing 🔹Debouncing Executes the function only after a delay once the event stops firing function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } 👉 Use case: Search input 🔹Throttling Executes the function at a fixed interval while the event is happening function throttle(fn, limit) { let lastCall = 0; return function (...args) { const now = Date.now(); if (now - lastCall >= limit) { lastCall = now; fn.apply(this, args); } }; } 👉 Use case: Scroll events ❕Difference - Debounce → waits for pause - Throttle → runs at intervals Debouncing reduces unnecessary calls by waiting, while throttling ensures controlled execution over time — both improve performance and user experience #Day20 #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

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day51 🚀 Built a Dark Mode Toggle with Image Control using HTML, CSS & JavaScript. Recently, I worked on a simple yet powerful UI feature — a toggle switch that not only switches between Light & Dark mode but also dynamically hides and shows an image based on user interaction. 🔧 Tech Used: HTML CSS JavaScript ✨ Features: Smooth Dark/Light mode transition Dynamic text update (Light Mode / Dark Mode) Image visibility control using JavaScript Clean and responsive UI ⚡ What I Learned: DOM Manipulation (getElementById, classList) Event Handling (addEventListener) Real-time UI updates Better understanding of user interaction 🔗Github Link :https://lnkd.in/dC-SVyxj Code Of School || Ritendra Gour sir || Avinash Gour sir #WebDevelopment #JavaScript #Frontend #LearningByDoing #100DaysOfCode

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 9 of #100DaysOfFrontend Built a Random Quote Generator using HTML, CSS, and JavaScript 💬 This project helped me understand how to work with arrays, generate random data, and update the UI dynamically using DOM manipulation. Small steps every day, but consistent progress 💪 Learning, building, and improving one project at a time 🔥 🔗 Live Demo: https://lnkd.in/gmYjmihf 💻 GitHub:https://lnkd.in/gNyMr8Ys #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency

When I began my journey with JavaScript, I frequently heard the advice: "Never use var — use let or const." I accepted this guidance without question, simply adhering to the rules. However, I eventually paused to ask: Why is var considered bad? This inquiry led me to the concept of scope, which clarified everything for me. Here’s the key difference that reshaped my understanding: if (true) { var name = "Ahmed"; } console.log(name); // "Ahmed" Why is name still accessible outside the block? Because var is function-scoped, not block-scoped. Now, let’s look at modern JavaScript: if (true) { let name = "Ahmed"; } console.log(name); // ReferenceError In this case, the variable is confined to the block where it belongs. This realization shifted my perspective: It’s not merely about avoiding var; it’s about ensuring predictability, maintaining control, and preventing silent bugs. The true lesson is that while we often follow rules to progress quickly, genuine growth occurs when we comprehend the reasons behind them. Now, whenever I encounter unexpected behavior in code, my first check is scope, as that’s frequently where the issue lies. Did you also start avoiding var without understanding why