❮ Previous Next ❯

Event Flow

  • This lesson explains event propagation including bubbling and capturing.

  • Introduction to Event Flow

    In JavaScript, events are actions performed by users or the browser, such as:

    • Clicking a button

    • Typing in an input box

    • Hovering over an element

    • Submitting a form

    When an event occurs on a webpage, it does not just affect one element.
    Instead, the event travels through the DOM structure.

    This movement of an event through elements is called Event Flow.

    What is Event Flow ?

    Event Flow defines the order in which elements receive an event when an event occurs.

    JavaScript follows three phases of event flow:

    1. Capturing phase

    2. Target phase

    3. Bubbling phase

    In this lesson, we focus on:

    • Event Bubbling

    • Event Capturing

    Why is Event Flow Important ?

    Understanding event flow helps you:

    • Handle events correctly

    • Avoid unexpected behavior

    • Control which element reacts first

    • Build efficient event handling logic

    Without understanding event flow:

    • Multiple handlers may run unexpectedly

    • Debugging becomes difficult

    • UI behavior becomes confusing

Understanding DOM Hierarchy with Parent and Child Elements

Demonstrates how elements are structured in a parent-child relationship 

<div id="parent">
  <button id="child">Click Me</button>
</div>

  • When the button is clicked:

    • The button receives the event

    • The parent <div> also becomes involved

    • The event moves through the DOM

    How it moves depends on bubbling or capturing.

    Event Bubbling

    What is Event Bubbling ?

    Event bubbling means:

    The event starts from the target element and then moves upward to its parent elements.

    This is the default behavior in JavaScript.

    Event Bubbling Flow

    Event order in bubbling:

    1. Target element

    2. Parent element

    3. Ancestor elements

    4. Document

Event Bubbling in DOM

Shows how events propagate from child element to parent element 

<!-- HTML -->
<div id="box">
  <button id="btn">Click Me</button>
</div>

<script>
// JavaScript
document.getElementById("box").addEventListener("click", function () {
  console.log("Div clicked");
});

document.getElementById("btn").addEventListener("click", function () {
  console.log("Button clicked");
});
</script>

  • Output When Button Is Clicked

    Button clicked

    Div clicked

    Explanation:

    • Button event runs first

    • Then event bubbles up to the div

    Example of Bubbling

    Imagine a complaint system:

    • Complaint starts with an employee

    • Goes to manager

    • Then goes to department head

    That is bubbling.

    Event Capturing

    What is Event Capturing ?

    Event capturing means:

    The event starts from the outermost ancestor and moves downward to the target element.

    Capturing is not default and must be enabled manually.

    Event Capturing Flow

    Event order in capturing:

    1. Document

    2. Parent elements

    3. Target element

    Enabling Event Capturing

    To enable capturing, pass true as the third argument in addEventListener().

Event Capturing in DOM

Demonstrates how events flow from parent to child using capturing phase 

<!-- HTML -->
<div id="box">
  <button id="btn">Click Me</button>
</div>

<script>
// Event capturing (third parameter = true)
document.getElementById("box").addEventListener(
  "click",
  function () {
    console.log("Div clicked");
  },
  true
);

document.getElementById("btn").addEventListener(
  "click",
  function () {
    console.log("Button clicked");
  },
  true
);
</script>

  • Output When Button Is Clicked

    Div clicked

    Button clicked

    Explanation:

    • Event is captured by parent first

    • Then reaches the button

      Bubbling vs Capturing

      FeatureEvent BubblingEvent Capturing
      DirectionBottom to topTop to bottom
      Default behaviorYesNo
      addEventListener third argumentfalse (default)true
      Common usageVery commonRare, specific cases

      Target Phase 

      Between capturing and bubbling, the event reaches the target element.

      This phase is called the target phase, where:

      • The actual clicked element handles the event

      Preventing Event Bubbling

      Sometimes, you do not want the event to move upward.

      JavaScript provides:

      event.stopPropagation();

    Target Phase and Stopping Event Propagation

    Shows how to handle events at target and prevent bubbling using stopPropagation() 

    <!-- HTML -->
<div id="box">
  <button id="btn">Click Me</button>
</div>

<script>
// Stop event bubbling
document.getElementById("btn").addEventListener("click", function (event) {
  event.stopPropagation();
  console.log("Button clicked only");
});
</script>

    • Now the parent event will not execute.

      Common Confusions

      • Thinking only one element handles an event

      • Forgetting bubbling is default

      • Misusing capturing unnecessarily

      • Not understanding event order

      Best Practices for Event Flow

      • Use event bubbling by default

      • Use capturing only when necessary

      • Avoid multiple handlers on same hierarchy

      • Use stopPropagation() carefully

      • Prefer clean and predictable event logic

      Use Cases

      • Menu click handling

      • Modal close behavior

      • Dropdown interactions

      • Event delegation (covered later)

    ❮ Previous Next ❯