Open In App

HTML | bubbles Event Property

Improve
Improve
Like Article
Like
Save
Share
Report

The bubbles event property is used for returning a Boolean value which indicates whether an event is a bubbling event or not. The event is triggered if an event handler is set for that object, if not so then the event bubbles up to the object’s parent. The event bubble up until it reaches the document object or is handled

What is event bubbling? Consider a situation an element is present inside another element and both of them handle an event. When an event occurs, in bubbling, the innermost element handles the event first, then the outer, and so on. Please refer this for details. 

Return Value: The bubbles event property returns true if the event can bubble up through the DOM, else it returns false

Syntax :

event.bubbles

The below program illustrates the bubbles event property: 

Example: Finding out if a specific event can bubble or not. 

html




<!DOCTYPE html>
<html>
<head>
    <title>bubbles Event Property in HTML</title>
    <style>
        h1 {
            color: green;
        }
 
        h2 {
            font-family: Impact;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>bubbles Event Property</h2>
 
    <p>To check if the onclick event is
        a bubbling event or not,
        double click the "Check Event" button.
    </p>
 
    <button ondblclick="MyEvent(event)">
        Check Event
    </button>
 
    <p id="test"></p>
 
    <script>
        function MyEvent(event) {
            <!-- Check whether the event is bubbling or not. -->
            let gfg = event.bubbles;
            document.getElementById("test").innerHTML = gfg;
        }
    </script>
 
</body>
</html>


Output:  

 

  Supported Browsers:

  • Opera
  • Internet Explorer
  • Google Chrome
  • Firefox
  • Apple Safari


Last Updated : 31 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads