HTML and CSS Reference
EXAMPLE 15.18 ( CONTINUED )
< p id="para1" >Some text in a paragraph element.</p>
< p id="para2" >Another paragraph element with text.
<a id="link1" href="#">link</a>
Global variables are declared for the script.
Once the page has loaded, the onload event is triggered and the anonymous func-
tion is called.
The getElementById() method is used to get a reference to on the elements in the
page: the body, the div , the paragraph, and the link.
For each element an onclick event is registered. The iam() function will be called
when the event happens. When the user clicks the link, the function will be called
and then bubble up to the parent of the link, its grandparent, and so on. If you
start at say “para1” and click on that paragraph, the bubbling starts from there and
ignores those events for “para2” and “link1”.
This function will be called when the click event happens on each of the elements
listed above. See the output to see when this function is called.
The body of the page is given a unique id .
In this example, the user clicked the link, which started a chain of events bubbling
up from there, as shown in Figures 15.34 and 15.35.
Figure 15.34 The page before any event occurs.