HTML and CSS Reference
In-Depth Information
EXAMPLE
15.18 (
CONTINUED
)
<
p id="para1"
>Some text in a paragraph element.</p>
<
p id="para2"
>Another paragraph element with text.
7
<a id="link1" href="#">link</a>
</p>
</div>
</body>
</html>
EXPLANATION
1
Global variables are declared for the script.
2
Once the page has loaded, the onload event is triggered and the anonymous func-
tion is called.
3
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.
4
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”.
5
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.
6
The body of the page is given a unique
id
.
7
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.
