JavaScript Event Bubbling

Written by Swapnil RajaPublished 24 Aug 2026

An event fired on an element travels up through its ancestors.

Click a button inside a div and the div hears about it too.

This is called bubbling, and it is what makes event delegation possible.

Example

javascript

document.body.innerHTML =
  '<div id="outer"><button id="inner">Go</button></div>';

document.getElementById("outer").addEventListener("click", function () {
  console.log("outer heard it");
});

document.getElementById("inner").click();

PreviousJavaScript Form Events NextJavaScript Event Delegation

Example

javascript

document.body.innerHTML =
  '<div id="outer"><div id="middle"><button id="inner">Go</button></div></div>';

const order = [];

document.getElementById("outer").addEventListener("click", function () { order.push("outer"); });
document.getElementById("middle").addEventListener("click", function () { order.push("middle"); });
document.getElementById("inner").addEventListener("click", function () { order.push("inner"); });

document.getElementById("inner").click();

console.log(order.join(" "));

Example

javascript

document.body.innerHTML =
  '<div id="outer"><button id="inner">Go</button></div>';

const order = [];

document.getElementById("outer").addEventListener("click", function () {
  order.push("outer capturing");
}, true);

document.getElementById("inner").addEventListener("click", function () {
  order.push("inner");
});

document.getElementById("inner").click();

console.log(order.join(" then "));

Example

javascript

document.body.innerHTML =
  '<div id="outer"><button id="inner">Go</button></div>';

document.getElementById("outer").addEventListener("click", function (event) {
  console.log(event.target.id + " / " + event.currentTarget.id);
});

document.getElementById("inner").click();

Example

javascript

document.body.innerHTML =
  '<div id="outer"><button id="inner">Go</button></div>';

const order = [];

document.getElementById("outer").addEventListener("click", function () { order.push("outer"); });
document.getElementById("inner").addEventListener("click", function (event) {
  order.push("inner");
  event.stopPropagation();
});

document.getElementById("inner").click();

console.log(order.join(" "));

Example

javascript

document.body.innerHTML = '<div id="box"><input id="field"></div>';

document.getElementById("box").addEventListener("focusin", function () {
  console.log("box heard the focus");
});

document.getElementById("field").dispatchEvent(
  new Event("focusin", { bubbles: true })
);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Bubbling</title>
  <style>
    #outer { padding: 24px; background: #dbeafe; }
    #inner { padding: 12px; }
  </style>
</head>
<body>

  <h1>Event Bubbling</h1>

  <div id="outer">
    Outer
    <button id="inner">Inner button</button>
  </div>

  <p id="out"></p>

  <script>
    const out = document.getElementById("out");
    let log = "";

    document.getElementById("inner").addEventListener("click", function () {
      log = "inner";
      out.textContent = log;
    });

    document.getElementById("outer").addEventListener("click", function () {
      log = log + " then outer";
      out.textContent = log;
    });
  </script>

</body>
</html>

JavaScript Event Bubbling

Example

How an Event Travels

Syntax

The Order Handlers Run

Example

Capturing Runs First

Example

target Stays the Same

Example

Stopping the Bubble

Example

Not Everything Bubbles

Example

Complete Example

Try It Yourself

Important Points

Conclusion