O B J E C T I V E S
In this chapter you will learn:
■ The concepts of events, event handlers and event bubbling.
■ To create and register event handlers that respond to mouse and keyboard events.
■ To use the event object to get information about an event.
■ To recognize and respond to many common events.
Introduction
We’ve seen that XHTML pages can be controlled via scripting, and we’ve already used a few events to trigger scripts, such as the onclick and onsubmit events. This chapter goes into more detail on JavaScript events, which allow scripts to respond to user interactions and modify the page accordingly. Events allow scripts to respond to a user who is moving the mouse, entering form data or pressing keys. Events and event handling help make web applications more responsive, dynamic and interactive.
In this chapter, we discuss how to set up functions to react when an event fires (occurs). We give examples of event handling for nine common events, including mouse events and form-processing events. A the end of the chapter, we provide a table of the events covered in this chapter and other useful events.
Registering Event Handlers
Functions that handle events are called event handlers. Assigning an event handler to an event on a DOM node is called registering an event handler. Previously, we have regis- tered event handlers using the inline model, treating events as attributes of XHTML ele- ments (e.g.,
). Another model, known as the traditional model, for registering event handlers is demonstrated alongside the inline model in Fig. 13.1.
In the earliest event-capable browsers, the inline model was the only way to handle events. Later, Netscape developed the traditional model and Internet Explorer adopted it. Since then, both Netscape and Microsoft have developed separate (incompatible)
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Fig. 13.1 | Event registration models. (Part 1 of 3.)
5 6 7 8
9Fig. 13.1 | Event registration models. (Part 2 of 3.)
Fig. 13.1 | Event registration models. (Part 3 of 3.)
advanced event models with more functionality than either the inline or the traditional model. Netscape’s advanced model was adapted by the W3C to create a DOM Events Specification. Most browsers support the W3C model, but Internet Explorer 7 does not. This means that to create cross-browser websites, we are mostly limited to the traditional and inline event models. While the advanced models provide more convenience and func- tionality, most of the features can be implemented with the traditional model.
Line 35 assigns “handleEvent()” to the onclick attribute of the div in lines 35–36. This is the inline model for event registration we’ve seen in previous examples. The div in line 39 is assigned an event handler using the traditional model. When the body element (lines 33–40) loads, the registerHandler function is called.
Function registerHandler (lines 25–29) uses JavaScript to register the function handleEvent as the event handler for the onclick event of the div with the id “tradi-
tional”. Line 27 gets the div, and line 28 assigns the function handleEvent to the div’s onclick property.
Notice that in line 28, we do not put handleEvent in quotes or include parentheses at the end of the function name, as we do in the inline model in line 35. In the inline model, the value of the XHTML attribute is a JavaScript statement to execute when the event occurs. The value of the onclick property of a DOM node is not an executable state- ment, but the name of a function to be called when the event occurs. Recall that JavaScript functions can be treated as data (i.e., passed into methods, assigned to variables, etc.).
Common Programming Error 13.1
Putting quotes around the function name when registering it using the inline model would assign a string to the onclick property of the node—a string cannot be called. 13.1
Common Programming Error 13.2
Putting parentheses after the function name when registering it using the inline model would call the function immediately and assign its return value to the onclick property. 13.2
Once the event handler is registered in line 28, the div in line 39 has the same behavior as the div in lines 35–36, because handleEvent (lines 19–22) is set to handle the onclick event for both divs. When either div is clicked, an alert will display “The event was successfully handled.”
The traditional model allows us to register event handlers in JavaScript code. This has important implications for what we can do with JavaScript events. For example, tradi- tional event-handler registration allows us to assign event handlers to many elements quickly and easily using repetition statements, instead of adding an inline event handler to each XHTML element. In the remaining examples in this chapter, we use both the inline and traditional registration models depending on which is more convenient.
Event onload
The onload event fires whenever an element finishes loading successfully (i.e., all its chil- dren are loaded). Frequently, this event is used in the body element to initiate a script after the page loads in the client’s browser. Figure 13.2 uses the onload event for this purpose. The script called by the onload event updates a timer that indicates how many seconds have elapsed since the document was loaded.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 13.2: onload.html -->
<!-- Demonstrating the onload event. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>onload Event</title>
<script type = "text/javascript">
<!--
var seconds = 0;
// called when the page loads to begin the timer
function startTimer()
{
Fig. 13.2 | Demonstrating the onload event. (Part 1 of 2.)
17 // 1000 milliseconds = 1 second 18 window.setInterval( “updateTime()”, 1000 ); 19 } // end function startTimer 20 21 // called every 1000 ms to update the timer 22 function updateTime() 23 { 24 ++seconds; 25 document.getElementById( “soFar” ).innerHTML = seconds; 26 } // end function updateTime 27 // –> 28 29 30
31Seconds you have spent viewing this page so far: 32 0
33 34