JavaScript’s Event Loop Explained Visually — Once and for All

Manali Khattar — Thu, 19 Jun 2025 08:30:31 +0000

Ever wondered why console.log() inside a setTimeout(..., 0) runs after everything else?

Or why your Promise logs show up before your timer, even if both seem async?

Welcome to the world of the Event Loop — one of JavaScript’s most powerful (and misunderstood) features.

In this post, I’ll walk you through exactly how the Event Loop works using:

Minimal theory
Real-world examples
Simple visual diagrams

Let’s dig in.

What’s Inside the JavaScript Runtime?
Before we talk about the Event Loop, here’s a quick overview of the runtime environment.

+--------------------+
|    Call Stack      |  ← Executes your functions
+--------------------+
         ↓
+--------------------+
|     Web APIs        |  ← Timers, fetch, DOM
+--------------------+
         ↓
+------------------------+
|   Macrotask Queue       | ← setTimeout, I/O
+------------------------+
         ↓
+------------------------+
|   Microtask Queue       | ← Promises, async/await
+------------------------+
         ↓
+--------------------+
|    Event Loop       | ← Coordinates everything
+--------------------+

Synchronous Example

function sayHi() {
  console.log("Hi");
}
sayHi();

This runs top to bottom inside the call stack.

Asynchronous Example with setTimeout

console.log("Start");

setTimeout(() => {
  console.log("Timer");
}, 0);

console.log("End");

Output:

Start
End
Timer

Why?
Because setTimeout doesn’t go directly on the call stack. It goes to Web APIs, waits for the timer, and then gets added to the macrotask queue, which only runs when the call stack is empty.

Microtasks vs Macrotasks
Try this code:

console.log("Start");

Promise.resolve().then(() => {
  console.log("Microtask");
});

setTimeout(() => {
  console.log("Macrotask");
}, 0);

console.log("End");

Output:

Start
End
Microtask
Macrotask

Promises (microtasks) always run before setTimeouts (macrotasks), even if both are async.
That’s how the Event Loop prioritizes execution.

Visual: The Event Loop Flow

[ Is Call Stack Empty? ]
         ↓
     Run All Microtasks
         ↓
     Run One Macrotask
         ↓
         Repeat

This is what makes JavaScript non-blocking — and yet single-threaded.

async/await in Action

async function demo() {
  console.log("1");
  await Promise.resolve();
  console.log("2");
}

demo();
console.log("3");

Output:

1
3
2

await splits the function. The part after await is queued as a microtask, and it runs after the current call stack completes.

Takeaways

JavaScript is single-threaded, but async thanks to the Event Loop.
Microtasks (Promises) run before Macrotasks (setTimeout, fetch, etc.).
Use this mental model to debug better and write cleaner async code.

Want to Visualize It?
I've created this Event Loop diagram to help you internalize the flow:

Wrapping Up
The Event Loop isn’t just theory — it directly affects how your code runs. Whether you’re dealing with React effects, API calls, or DOM events, mastering this concept can help you avoid weird bugs and timing issues.

Let me know what confused you the most about the Event Loop when you first learned it.

And if you found this helpful, consider giving it a ❤️ or sharing it with a fellow developer.

Mastering Event Propagation in JavaScript: Bubbling vs Capturing

Manali Khattar — Tue, 17 Jun 2025 05:25:50 +0000

Events are a core part of JavaScript development. Whether you're building interactive UIs or handling user inputs, understanding event propagation is key to writing clean, maintainable code.

In this post, we’ll explore how events travel through the DOM using bubbling and capturing, the difference between the two, and when to use each.

What is Event Propagation?
Event propagation refers to the order in which event handlers are invoked when an event occurs in the DOM. There are two main phases:

Capturing Phase (a.k.a. trickling)
Bubbling Phase

Let’s break them down.

Event Bubbling
Event bubbling is the default phase in JavaScript. When an event is triggered on an element, it first runs the handler on the target element, then "bubbles up" to its ancestors.

Example:

If you click a button inside nested divs, the event is handled by the button first, then moves up to its parent, grandparent, and so on.

Event Capturing
In capturing, the event starts at the topmost ancestor and travels down the DOM tree to the target element. You need to explicitly enable capturing by passing true as the third parameter in addEventListener.

<!DOCTYPE html>
<html>
<head>
  <title>Event Propagation Example</title>
</head>
<body>
  <div id="parent">
    <div id="child">
      <button id="button">Click Me</button>
    </div>
  </div>

  <script>
    function parentClick() {
      console.log("Parent clicked");
    }

    function childClick() {
      console.log("Child clicked");
    }

    function buttonClick() {
      console.log("Button clicked");
    }

    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    var button = document.getElementById("button");

    parent.addEventListener("click", parentClick, true); // Use capturing phase
    child.addEventListener("click", childClick, true); // Use capturing phase
    button.addEventListener("click", buttonClick); // Default: bubbling phase
  </script>
</body>
</html>

Expected Output in Console (on button click):

Parent clicked
Child clicked
Button clicked

Why this order? Because parentClick and childClick use capturing, they execute before the bubbling-phase buttonClick.

When to Use Bubbling vs Capturing

Use Bubbling when:

You want parent components to react to child actions.
You’re implementing event delegation (e.g., handling clicks from multiple child elements in one parent handler).
You want to close a modal when clicking outside of it.

Use Capturing when:

You need to intercept an event before it reaches the target.
You want to prevent a default action early (e.g., prevent link navigation).
You’re building analytics or monitoring tools that listen high up in the DOM.

Stopping Propagation

You can take control of the flow using:

event.stopPropagation() – stops the event from bubbling or capturing further.
event.stopImmediatePropagation() – stops all other listeners on the same element. Use them wisely to avoid breaking complex interactions.

Final Thoughts

Understanding event propagation helps you build more powerful and optimized JavaScript applications. Whether you're debugging weird event behaviors or designing reusable components, mastering bubbling and capturing gives you a real edge.

Visual Reference

Got Questions?
Have you faced tricky situations due to event propagation? Share your story or doubts in the comments — let’s learn together!

DEV Community: Manali Khattar

JavaScript’s Event Loop Explained Visually — Once and for All

Mastering Event Propagation in JavaScript: Bubbling vs Capturing