0 JavaScript 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 registered
event handlers using the inline model, treating events as attributes of XHTML elements
(e.g.,

). Another model, known as the traditional model,
for registering event handlers is demonstrated alongside the inline model in Fig. 11.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)
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.

1
2
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5
6

Fig. 11.1 | Event registration models. (Part 1 of 3.)

7
8
9
10
16
32
33
34
35

36 Inline registration model

37
38
39

Traditional registration model

40
41

Fig. 11.2

a) The user clicks the div for which the event handler was registered using the inline model.

Fig. 11.1 | Event registration models. (Part 2 of 3.)

JavaScript: Events

b) The event handler displays an alert dialog

 

c) The user clicks the div for which the event handler was registered using the traditional model.

d) The event handler displays an alert dialog.

 

Fig. 11.1 | Event registration models. (Part 3 of 3.)

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 functionality,
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 "traditional".
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 statement,
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 11.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. 11.1

Common Programming Error 11.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. 11.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, traditional
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.