JavaScript Event bubbles Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word BUBBLES

Definition

In JavaScript, the bubbles read-only property of the Event interface tells you whether the event bubbles up through the DOM tree (MDN).

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.bubbles. Start with this line.

JavaScript
event.bubbles
CallWhat it does
event.bubblesPrimary signature.

Built into the browser. Read event.bubbles on an Event instance — no import required.

Library declarations
JavaScript
event.bubbles

Parameters

ParameterDescription
Parent listenerOptional. Receives bubbling events
stopPropagation()Optional. Cuts off further bubbling

Return Value

Return ValueDescription
*The current value of event.bubbles.

JavaScript Examples

Example 1 — Read event.bubbles

Most UI events like click bubble — confirm with the property.

JavaScript
const btn = document.getElementById("btn");

btn.addEventListener("click", (event) => {
  console.log(event.bubbles); // true
});
Try It Yourself

How It Works

  1. Listen for click. The browser creates a MouseEvent.
  2. Read event.bubbles. It is a boolean set by the event type.
  3. Click is bubbling. So the value is true.
  4. You cannot assign it. The property is read-only (MDN).

Example 2 — Set bubbles When Creating

Synthetic events default to false unless you opt in.

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

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

How It Works

  1. Default constructor. new Event("look") does not bubble.
  2. Pass options. { bubbles: true } enables the bubble phase.
  3. Read afterward. event.bubbles reflects what you set.
  4. Locked after create. You cannot flip the flag later.

Example 3 — Parent Hears a Bubbling Event

Dispatch from a child; only bubbles: true reaches the parent.

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

parent.addEventListener("ping", () => {
  console.log("parent heard ping");
});

child.dispatchEvent(new Event("ping", { bubbles: true }));
// → parent heard ping

child.dispatchEvent(new Event("ping", { bubbles: false }));
// → parent stays silent
Try It Yourself

How It Works

  1. Parent listens for a custom "ping" type.
  2. Child dispatches with bubbles: true.
  3. Bubble phase walks up; the parent handler runs.
  4. With false the event never leaves the child for bubbling.
Compatibility

Browser Support

Event.bubbles is Baseline Widely available (MDN: since July 2015). Safe for modern evergreen browsers. Also available in Web Workers.

✓ Baseline · Widely available

Event.bubbles

Read-only boolean — true when the event bubbles up the DOM tree.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Event.bubbles Excellent

Bottom line: Read event.bubbles to know if parents can hear the event. Set bubbles only when creating synthetic events. See the MDN Event.bubbles reference.

Frequently Asked Questions

It is a read-only boolean on an Event. It is true if that event bubbles up through the DOM tree after the target phase, and false if it does not (MDN).
No. MDN marks Event.bubbles as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
No. bubbles is read-only. Set it when you create a synthetic event with new Event(type, { bubbles: true }) or a subclass constructor. Built-in events get their bubbling behavior from the browser.
No. Many do (for example click and input), but some do not (for example focus and blur in the classic model, and Element scroll). Check event.bubbles or the docs for that event type.
Call event.stopPropagation() to stop further propagation. Call stopImmediatePropagation() to also skip remaining listeners on the same target. preventDefault() does not stop propagation by itself.
Use new Event("my-event", { bubbles: true }), then target.dispatchEvent(event). Parent listeners for that type hear it during the bubble phase.

Next: cancelable

Learn when preventDefault() can cancel an event.

cancelable tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Event Constructor JavaScript Event cancelable Property