ADDING JUST ENOUGH JAVASCRIPT - HTML5 - page 233

a {
text - decoration : none ;
color : #060;
}
</ style >

< script type = ”text/javascript” >
function detectLoaded ()
{
alert ( “Page is loaded.” );
}
function detectClick ()
{
alert ( “You clicked a link.” );
}
function detectDoubleClick ()
{
alert ( “You double-clicked another link.” );
}
</script>
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Event Handler </ title >
</ head >
< body onLoad = ”detectLoaded()” >
< hgroup >
< h1 > < a href = ”#” onClick = ”detectClick()” > Click This </ a ></ h1 >
< h2 > < a href = ”#” onDblClick = ”detectDoubleClick()” > Double - Click This </ a >
</ h2 >
</ hgroup >
</ body >
</ html >

237

h e JavaScript functions can be whatever you want them to be, which enables you to interact
far more with the users. You can provide instructions, options, cautions, or whatever you want.

Handling with any element
In the “click” area in the previous program, a link tag, <a> , is used to set up the event handler,
using the following format:

< a href = ”#” onClick = ”clickEventHandler()” >

h at kind of code is nothing new to HTML5. It's used here for one simple reason: When the
mouse moves over the text within the <a> tag, the cursor changes so that users know that
they're over linked text.

However, you can set up an event handler in any element. For example, consider the following
Web page ( ClickP.html in this chapter's folder at www.wiley.com/go/smashing
html5 ).