​x
 
<!DOCTYPE html>
<html>
​
<body>
    <div id="cube" style="border: 1px solid; padding: 50px;"> 
        <div id="square" style="border: 1px dotted; padding:5px;">
            <p id="inner" >This is innermost element (CLICK HERE!)</p>
        </div>
    </div>
    
    <script>
        document.getElementById("cube").addEventListener("click", function(){
            document.getElementById("cube").style.color = "red";
            alert("Bubble in outer most div");
        }, false);
        
        document.getElementById("square").addEventListener("click", function(){
            document.getElementById("square").style.color = "yellow";
            alert("Bubble in inner div");
        }, false);
        
        document.getElementById("inner").addEventListener("click", function(){
            document.getElementById("inner").style.color = "blue";
            alert("Event in para: inner most element");
        }, false);
    </script>
</body>
​
</html>