Sams Teach Yourself JavaScript in 24 Hours

Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

Understanding Event Handlers

As you learned in Hour 3, "How JavaScript Programs Work," JavaScript programs don't have to execute in order. They can also detect events and react to them. Events are things that happen to the browser—the user clicking a button, the mouse pointer moving, or a Web page or image loading from the server.

A wide variety of events allow your scripts to respond to the mouse, the keyboard, and other circumstances. Events are the key method JavaScript uses to make Web documents interactive.

The script that you use to detect and respond to an event is called an event handler. Event handlers are among the most powerful features of JavaScript. Luckily, they're also among the easiest features to learn and use—often, a useful event handler requires only a single statement.

Objects and Events

As you learned in Hour 9, "Working with the Document Object Model," JavaScript uses a set of objects to store information about the various parts of a Web page—buttons, links, images, windows, and so on. An event can often happen in more than one place (for example, the user could click any one of the links on the page), so each event is associated with an object.

Each event has a name. For example, the onMouseOver event occurs when the mouse pointer moves over an object on the page. When the pointer moves over a particular link, the onMouseOver event is sent to that link's event handler, if it has one.

To define an event handler, you add the word on to the beginning of the event's name. For example, the onMouseOver event handler is called when the mouse moves over a link. To define the event handler, you add it to that particular link's <a> HTML tag.

Note

Notice the strange capitalization on the onMouseOver keyword. This is the standard notation for event handlers. The on is always lowercase, and each word in the event name is capitalized.

Creating an Event Handler

You don't need the <script> tag to define an event handler. Instead, you add an event handler attribute to an individual HTML tag. For example, here is a link that includes an onMouseOver event handler:

<a href="http://www.jsworkshop.com/"
   onMouseOver="window.alert('You moved over the link.')">
Click here</a>

Note that this is all one <a> tag, although it's split into multiple lines. This specifies a statement to be used as the onMouseOver event handler for the link. This statement displays an alert message when the mouse moves over the link.

Note

The previous example uses single quotation marks to surround the text. This is necessary in an event handler because double quotation marks are used to surround the event handler itself. (You can also use single quotation marks to surround the event handler and double quotes within the script statements.)

You can use JavaScript statements like the previous one in an event handler, but if you need more than one statement, it's a good idea to use a function instead. Just define the function in the header of the document, and then call the function as the event handler like this:

<a href="#bottom" onMouseOver="DoIt()">Move the mouse over this link.</a>

This example calls a function called DoIt() when the user moves the mouse over the link. Using a function is convenient because you can use longer, more readable JavaScript routines as event handlers. You'll use a longer function to handle events in the "Workshop: Adding Link Descriptions to a Web Page" section of this hour.

Note

For simple event handlers, you can use two statements if you separate them with a semicolon. However, in most cases it's easier to use a function to perform the statements.

Changing Event Handlers with JavaScript

Rather than specifying an event handler in an HTML document, you can use JavaScript to assign a function as an event handler. This allows you to set event handlers conditionally, turn them on and off, and change the function that handles an event dynamically.

To define an event handler in this way, you first define a function, then assign the function as an event handler. Event handlers are stored as properties of the document object or another object that can receive an event. For example, these statements define a function called mousealert, then assign it as the onMouseDown event handler for the document:

function mousealert() {
alert ("You clicked the mouse!");
}
document.onmousedown = mousealert;

Using the event Object

When an event occurs, you may need to know more about the event—for example, for a keyboard event, you need to know which key was pressed. JavaScript includes an event object that provides this information.

To use the event object, you can pass it on to your event handler function. For example, this statement defines an onKeyPress event that passes the event object to a function:

<body onKeyPress="getkey(event)">

You can then define your function to accept the event as a parameter:

function getkey(e) {
...
}

Unfortunately, while both Internet Explorer and Netscape support the event object, they support different properties. One property that is the same in both browsers is event.type, the type of event. This is simply the name of the event, such as mouseover for an onMouseOver event, and keypress for an onKeyPress event. The following sections list some additional useful properties for each browser.

Internet Explorer event Properties

The following are some of the commonly used properties of the event object for Internet Explorer 4.0 and later:

Netscape event Properties

The following are some of the commonly used properties of the event object for Netscape 4.0 and later:

Note

The event.pageX and event.pageY properties are based on the top-left corner of the element where the event occurred, not always the exact position of the mouse pointer.

Share ThisShare This

Informit Network