In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > bubbles (event)

bubbles property (event)

Browser support:

9

Returns a Boolean value that indicates whether the current event can propagate up the DOM hierarchy or not.

There are two types of events, one propagates up the DOM hierarchy, the other does not.

For example the onclick event bubbles up the DOM hierarchy, the onfocus event does not.

onclick (bubbles up):

When the user clicks on a button, an onclick event is sent to the button element first.
After that, the onclick event is sent to the parent element of the button.
After that, the onclick event is sent to the parent element of the parent element of the button, and so on ...

onfocus (does not bubbles up):

The onfocus event is sent only to the button element.

Therefore the bubbles property returns true in case of the onclick event and returns false when an onfocus event happened. Try Example 1 to test it.

Note that the order of propagation can be different for the body, document and window objects in browsers. See Example 2 for details.

The bubbles property is supported in Internet Explorer from version 9. There is no way to determine whether an event propagates up in Internet Explorer before version 9.

When an event can bubble up, you can stop its propagation with the cancelBubble property or the stopPropagation method. Use the stopPropagation method in Firefox, Opera, Google Chrome and Safari, because the cancelBubble property is deprecated in those browsers. Internet Explorer also supports the stopPropagation method from version 9. In Internet Explorer before version 9, use the cancelBubble property, because the stopPropagation method is not supported.
With the cancelBubble property, you cannot allow the propagation of events that cannot bubble up, you can only prevent the propagation of events that can. Note that the use of the stopPropagation method or the cancelBubble property on an event that cannot propagate does not cause an error.

The properties and methods mentioned above are related to event propagation. If you need to suppress the default action for an event, then see the page for the preventDefault method or the returnValue property. If you need more information about event propagation and capturing, see the page for the event object.

Syntax:

object.bubbles;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

Boolean that represents the propagation state.

One of the following values:

false

The event does not bubble through the element hierarchy.

true

The event can bubble through the element hierarchy.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the event bubbling for the onclick and onfocus events:

<head>
    <script type="text/javascript">
        function ProcessEvent (event, eventName, elementName, stopPropagate) {
            WriteInfo ("The " + elementName + " element got an " + eventName + " event.");
            if (stopPropagate) {
                if ('bubbles' in event) {   // all browsers except IE before version 9
                    if (event.bubbles) {
                        event.stopPropagation ();
                        WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                    }
                    else {
                        WriteInfo ("The " + eventName + " event cannot propagate up the DOM hierarchy.");
                    }
                }
                else {  // Internet Explorer before version 9
                        // always cancel bubbling
                    event.cancelBubble = true;
                    WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                }
            }
        }

        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }
    </script>
</head>
<body onclick="ProcessEvent (event, 'onclick', 'body', false);" 
      onfocus="ProcessEvent (event, 'onfocus', 'body', false);">

    The following button allows the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'first button', false);" 
            onfocus="ProcessEvent (event, 'onfocus', 'first button', false);">Allow propagation</button>
    <br /><br />
    The following button stops the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'second button', true);" 
            onfocus="ProcessEvent (event, 'onfocus', 'second button', true);">Stop propagation</button>
    <br /><br />

    Information about the events:<br />
    <div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example demonstrates the difference of the propagation chains in browsers:

<head>
    <script type="text/javascript">
        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }

        function OnWindowClick () {
            WriteInfo ('window');
        }

        function OnDocumentClick () {
            WriteInfo ('document');
        }

        function Init () {
            if (window.addEventListener) {      // all browsers except IE before version 9
                window.addEventListener ("click", OnWindowClick, false);
            }
            else {
                if (window.attachEvent) {       // IE before version 9
                    window.attachEvent ('onclick', OnWindowClick);
                }
            }

            if (document.addEventListener) {    // all browsers except IE before version 9
                document.addEventListener ("click", OnDocumentClick, false);
            }
            else {
                if (document.attachEvent) {     // IE before version 9
                    document.attachEvent ('onclick', OnDocumentClick);
                }
            }
        }
    </script>
</head>
<body onload="Init ();" onclick="WriteInfo ('body')">
    Click on the button and you can see the propagation chain in the field below.
    <table onclick="WriteInfo ('table')">
        <tbody onclick="WriteInfo ('tbody')">
            <tr onclick="WriteInfo ('tr')">
                <td onclick="WriteInfo ('td')">
                    <span onclick="WriteInfo ('span')">
                        <button onclick="WriteInfo ('button');">Click on me!</button>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
    <div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body>