Using JavaScript to Respond to Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
In your experience with JavaScript so far, most of the scripts you've written have executed in a calm, orderly fashion, moving from the first statement to the last.
In this hour, you'll learn to use the wide variety of event handlers supported by JavaScript. Rather than executing in order, scripts using event handlers can interact directly with the user. You'll use event handlers in just about every script you write in the rest of this book.
Hour 10 covers the following topics:
-
How event handlers work
-
How event handlers relate to objects
-
Creating an event handler
-
Testing an event handler
-
Detecting mouse actions
-
Detecting keyboard actions
-
Intercepting events with a special handler
-
Adding friendly link descriptions to a Web page
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.
TIP
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:
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 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, etc.) 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 (1 for the left button, 3 for the right.)
event.target: The object where the element occurred.
TIP
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.