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
 
Search WWH ::




Custom Search