JavaScript Event bubbles Property

What You’ll Learn

The bubbles property is a read-only boolean on every Event: true if the event bubbles up the DOM tree, false if it does not. Learn how to read it, set it on synthetic events, see parent listeners fire, and relate it to stopPropagation—with five examples and try-it labs.

Introduction

After an event reaches its target, some events continue upward through ancestors—that is bubbling. event.bubbles tells you whether this event participates in that upward trip.

You cannot assign to event.bubbles. For synthetic events, pass { bubbles: true } (or false) to new Event() (or a subclass). Built-in events get their value from the browser’s event definition.

Understanding Event.bubbles

An instance property that answers: “After the target phase, will this event travel up the ancestor chain?”

• Value — true if it bubbles; false otherwise.
• Read-only — set only at construction time for synthetic events.
• Propagation — bubbling can be stopped with stopPropagation().
• Not the same as cancelable — cancelable controls preventDefault(), not tree travel.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.bubbles

Value

A boolean: true if the event bubbles up through the DOM tree.

Set on synthetic events

const bubbling = new Event("look", { bubbles: true });
const local = new Event("look", { bubbles: false }); // default

console.log(bubbling.bubbles); // true
console.log(local.bubbles);    // false

⚖️ bubbles vs Related Ideas

Examples Gallery

Examples follow MDN Event: bubbles. Use View Output or Try It Yourself.

document.getElementById("btn").addEventListener("click", (event) => {
  console.log("bubbles =", event.bubbles); // true for click
});

bubbles = true

const a = new Event("look"); // default bubbles: false
const b = new Event("look", { bubbles: true });

console.log(a.bubbles); // false
console.log(b.bubbles); // true

false
true

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const out = document.getElementById("out");

parent.addEventListener("ping", () => {
  out.textContent = "parent heard ping (bubbled)";
});

child.dispatchEvent(new Event("ping", { bubbles: true }));
// With { bubbles: false }, the parent would not hear it.

parent heard ping (bubbled)

function passItOn(e) {
  console.log("manually passing", e.type);
}

function doOutput(e) {
  console.log("output for", e.type, "bubbles=" + e.bubbles);
}

function handleInput(e) {
  // Check whether the event bubbles; pass the event along if not
  if (!e.bubbles) {
    passItOn(e);
  }
  // Already bubbling (or after manual pass)
  doOutput(e);
}

handleInput(new Event("input-like", { bubbles: false }));
handleInput(new Event("click-like", { bubbles: true }));

manually passing input-like
output for input-like bubbles=false
output for click-like bubbles=true

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const out = document.getElementById("out");
const log = [];

parent.addEventListener("ping", () => log.push("parent"));
child.addEventListener("ping", (e) => {
  log.push("child");
  e.stopPropagation(); // parent will not run
});

child.dispatchEvent(new Event("ping", { bubbles: true }));
out.textContent = log.join(" → "); // "child"

child

🚀 Common Use Cases

• Event delegation: one parent listener for many bubbling child events.
• Choosing { bubbles: true } on custom app events so layouts can react.
• Detecting whether a received event will reach outer handlers.
• Teaching / debugging propagation with logs of bubbles and eventPhase.
• Pairing with stopPropagation when a component must own an interaction.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• Read-only—set via constructor options for synthetic events.
• preventDefault() does not stop bubbling; use stopPropagation().
• Related learning: Event(), dispatchEvent(), addEventListener(), MouseEvent(), JavaScript hub.

💡 Best Practices