How to code an event handler
An event handler is a function that is executed when an event occurs. As figure 2-18 shows, some common events are the onclick event of a Button object and the onload event of the window object. These events are used by the application in this figure. This application uses the alert method to display a dialog box when the user clicks the Display Message button.
The first function in this application is the $ function, which is our shortcut for using the getElementById method to return an XHTML element. You'll use a function like this in most JavaScript applications.
The second function is the event handler, which is named display_click. This function just executes the alert method to display a message. At this point in the code, though, the display_click function is not an event handler. Its name is just a reminder of the purpose of the function. The name alone doesn't assign the function to an event.
It is the third function that assigns the display_click function to the onclick event of the XHTML element that has "btnDisplay" as its id. This function is executed when the onload event of the window object is fired. That happens after the XHTML document has been fully loaded into the web browser.
Note in this third function that display_click doesn't have a set of parentheses after it. That's because this code isn't calling the function. Instead, it is referring to the function as a whole and assigning that function to an event. As a result, that function will be called when the event is fired.
In contrast, if you were to put parentheses after display_click, the function would be called right away, the alert box would be displayed without the user clicking the button, and the return value of the function would be undefined. Then, when the user did click the button, nothing would happen since the function wouldn't be assigned to the event.
In summary, what the third function is doing is using one event handler to assign another event handler to an event. This delays the assignment of the display_click event handler until after the page is loaded. This is necessary because the code in the head section is executed before the DOM is built. By delaying this assignment until after the page is loaded, the application makes sure that the call to the $ function by the display_click event handler will be successful.
When you use this technique, a problem can arise if a page takes a few seconds to load. In that case, the user might start interacting with the elements on the page before the page is fully loaded and the event handlers are attached. In chapter 14, though, you'll learn how to add event handlers to a web page before the page is completely loaded.
Incidentally, the event handler for the window.onload event can do more than assign functions to events. In fact, it can do whatever needs to be done after the DOM is loaded. You'll see this illustrated in a moment.
Common events
An application with an event handler for the onclick event
<head><title>JavaScript Event Handler</title><script type="text/javascript">// This function receives an id and gets the related XHTML object.var $ = function ( id ) {return document.getElementById( id );}// This is the event handler for the onclick event of the button.var display_click = function () {alert( "You clicked the button.");}// This is the event handler for the onload event of the page.// It is executed after the page is loaded and the DOM has been built.window.onload = function () {// This statement assigns the event handler named display_click// to the onclick event of the XHTML object named btnDisplay$("btnDisplay").onclick = display_click;}</script></head><body><p><input type="button" value="Display Message" id="btnDisplay" /></p></body></html>
The web browser after the Display Message button is clicked
Description
Figure 2-18 How to code an event handler