Let's say you have two divs, one inside another. When a div is clicked, it will open up the alert box that displays the div's ID property value.
Let's start with the HTML. In the following HTML markup, we have two div elements. The parent div has an ID of
#parentand the child div has an ID of#child.<body> <div id="parent"> <p>#parent</p> <div id="child"> <p>#child</p> </div> </div> </body>
We'll style them with different background colors, widths, and heights so we can see each div better.
#parent { width:200px; height:200px; background-color: #999; } #child { width:100px; height:100px; background-color:#ccc; }Open the HTML browser. You should see the following:
Let's explore the concept of event bubbling by adding a
clickevent on all divs in the web page. When theclickevent is triggered, we will display an alert dialog box with the ID of the div that triggered the event.$$('div').addEvent...