HTML and CSS Reference
In-Depth Information
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
style type
=
”text/css”
>
p
{
font
-
family
:
Verdana
,
Geneva
,
sans
-
serif
;
color
:
#FF0;
background
-
color
:
#00F;
font
-
size
:
24px
;
text
-
align
:
center
;
font
-
weight
:
bold
;
}
</
style
>
<
script type
=
”text/javascript”
>
function showArticle
()
{
alert
(
“You just clicked within a <article> container”
);
}
function showHeader
()
{
alert
(
“You just clicked within a <header> container”
);
}
function showP
()
{
alert
(
“You just clicked within a <P> container”
);
}
</script>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
OnClick in any Element
</
title
>
</
head
>
238
<
body
>
<
article onClick
=
”showArticle()”
>
<
header onClick
=
”showHeader()”
>
<
h1
>
This is an H1 Element in the Header
</
h1
>
</
header
>
<
section
>
<
p onClick
=
”showP()”
>
Click This Paragraph
</
p
>
This is just plain old text in the article container
.
Click here just to see
what happens
.
</
section
>
</
article
>
</
body
>
</
html
>
In looking at the above program, you may have noticed that some events are embedded inside
other elements that also have event handlers. For instance, all the elements are inside the
<article>
tag. What will happen when you click on the paragraph that has an event