Sams Teach Yourself JavaScript in 24 Hours

Understanding Event Handlers

As you learned in Hour 3, "Getting Started with JavaScript Programming," JavaScript programs don't have to execute in order. You also learned they can detect events and react to them. Events are things that happen to the browserthe user clicking a button, the mouse pointer moving, or a web page or image loading from the server.

A wide variety of events enable 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 useoften, a useful event handler requires only a single statement.

Objects and Events

As you learned in Hour 4, "Working with the Document Object Model (DOM)," JavaScript uses a set of objects to store information about the various parts of a web pagebuttons, 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.

Creating an Event Handler

You don't need the <script> tag to define an event handler. Instead, you can 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.

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 "Try It Yourself: Adding Link Descriptions to a Web Page" section of this hour.

Defining 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, and 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(), and then assign it as the onMouseDown event handler for the document:

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

You can use this technique to set up an event handler for any HTML element, but an additional step is required: You must first find the object corresponding to the element. To do this, use the document.getElementById() function. First, define an element in the HTML document and specify an id attribute:

<a href="http://www.google.com/" id="link1">

Next, in the JavaScript code, find the object and apply the event handler:

obj = document.getElementById("link1");
obj.onclick = MyFunction;

You can do this for any object as long as you've defined it with a unique id attribute in the HTML file. Using this technique, you can easily assign the same function to handle events for multiple objects without adding clutter to your HTML code. See the "Try It Yourself" section in this hour for an example of this technique.

Supporting Multiple Event Handlers

What if you want more than one thing to happen when you click on an element? For example, suppose you want two functions called update and display to both execute when a button is clicked. You can't assign two functions to the onclick property. One solution is to define a function that calls both functions:

function UpdateDisplay() {
    update();
    display();
}

This isn't always the ideal way to do things. For example, if you're using two third-party scripts and both of them want to add an onLoad event to the page, there should be a way to add both. The W3C DOM standard defines a function, addEventListener, for this purpose. This function defines a listener for a particular event and object, and you can add as many listener functions as you need.

Unfortunately, addEventListener is not supported by Internet Explorer (as of versions 6 and 7), so you have to use a different function, attachEvent, in that browser. See Hour 15, "Unobtrusive Scripting," for a function that combines these two for a cross-browser event-adding script.

Using the event Object

When an event occurs, you might need to know more about the eventfor example, for a keyboard event, you need to know which key was pressed. The DOM 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) {
...
}

In Mozilla-based browsers (Firefox and Netscape), an event object is automatically passed to the event handler function, so this will work even if you use JavaScript rather than HTML to define an event handler. In Internet Explorer, the most recent event is stored in the window.event object. The previous HTML example passes this object to the event handler function. If you define the event handler with JavaScript, this is not possible, so you need to use some code to find the correct object:

Function getkey(e) {
    if (!e) e=window.event;
...
}

This checks whether the e variable is already defined. If not, it gets the window.event object and stores it in e. This ensures that you have a valid event object in any browser.

Unfortunately, while both Internet Explorer and Mozilla-based browsers support event objects, 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:

• event.button The mouse button that was pressed. This value is 1 for the left button and usually 2 for the right button.

• event.clientX The x-coordinate (column, in pixels) where the event occurred.

• event.clientY The y-coordinate (row, in pixels) where the event occurred.

• event.altkey A flag that indicates whether the Alt key was pressed during the event.

• event.ctrlkey Indicates whether the Ctrl key was pressed.

• event.shiftkey Indicates whether the Shift key was pressed.

• event.keyCode The key code (in Unicode) for the key that was pressed.

• event.srcElement The object where the element occurred.

Netscape and Firefox event Properties

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

• event.modifiers Indicates which modifier keys (Shift, Ctrl, Alt, and so on) were held down during the event. This value is an integer that combines binary values representing the different keys.

• event.pageX The x-coordinate of the event within the web page.

• event.pageY The y-coordinate of the event within the web page.

• event.which The keycode for keyboard events (in Unicode), or the button that was pressed for mouse events (It's best to use the cross-browser button property instead.)

• event.button The mouse button that was pressed. This works just like Internet Explorer except that the left button's value is 0 and the right button's value is 2.

• event.target The object where the element occurred.