ADDING JUST ENOUGH JAVASCRIPT - HTML5 - page 232

EVENT HANDLERS
h e real power of JavaScript with HTML5 can be better seen when the program waits until
the user does something to launch a script. For example, if the user clicks something, you can
launch any JavaScript program you want. You use an HTML5 event handler. h e page detects
some kind of action (an event) and has a built-in function that recognizes the event.

HTML5 recognizes a lot of events. Some of the events occur automatically — such as when
the page loads. Other events occur when users do something with the mouse or keyboard.
h e elements in Table 12.1 shows a sample of some of the dif erent events handlers.

Table 12.1 A Sample of HTML5 Event Handlers

onchange onclick ondbleclick ondrag ondragend

ondragenter ondragleave ondragover ondragstart ondrop

onkeydown onkeypress onkeyup onmousedown onmousemove

onmouseout onmouseover onmouseup onmousewheel onpause

onplay onplaying onprogress onloadstart onload

h e general format of all events linked to elements is:

< element onEvent = “javascriptFunction()” >

236

For example,

< body onLoad = “announceSomething()” >

uses the body element with the onLoad event handler to i re a JavaScript function named
announceSomething() .

Detecting a variety of events
To see how event handlers work with JavaScript, the following program ( ClickDetect.
html in this chapter's folder at www.wiley.com/go/smashinghtml5 ) has three dif erent
event handlers and three dif erent JavaScript functions that are launched by the events. h e
i rst one sends out an alert when the page loads, the second i res when the top link is clicked,
and the third launches an alert when the second link is double-clicked.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
h1 , h2 {
font - family : Tahoma , Geneva , sans - serif ;
}