 |  |
| |
Event Types
Event Objects
Binding Event Handlers to Elements
Preventing Default Event Actions
Event Propagation
Understanding Keyboard Event Data
Dragging Elements
Event Futures
A graphical user interface constantly monitors the computer's activity for signs of life from devices such as the mouse, keyboard, network port, and so on. Programs are written to respond to specific actions, called events, and run some code based on numerous conditions associated with the event. For example, was the Shift key held down while the mouse button was clicked? Where was the text insertion pointer when a keyboard key was pressed? As you can see, an event is more than the explicit action initiated by the user or system—an event also has information associated with it that reveals details about the state of the world when the event occurred.
In a Dynamic HTML page, you can use a scripting language such as JavaScript (or VBScript in Internet Explorer for Windows) to instruct a visible element to execute some script statements when the user does something with that element. The bulk of scripts you write for documents concern themselves with responding to user and system actions after the document has loaded. In this chapter, we'll examine the events that are available for scripting and discuss how to associate an event with an object. We'll also explore how to manage events in the more complex and conflicting event models within the IE and W3C DOMs.
Events have been scriptable since the earliest scriptable browsers. The number and granularity of events has increased with the added scriptability of each browser generation. The HTML 4 and DOM Level 2 recommendations cite a group of events called "intrinsic events," which all browsers since Navigator 4 and IE 4 have in common (many of them dating back to the time of Navigator 2). These events include the onclick, onmouseover, onkeypress, and onload events, as well as many other common events. But beyond this list, there are a number of events that are browser specific and support the idiosyncrasies of the document object models implemented in Navigator and Internet Explorer. By far the biggest group of browser-specific events belongs to IE 5 and later—most of those implemented thus far only in the Windows version.
Every event has a type name, such as click, keydown, and load. For example, when a user clicks a mouse button, the physical action fires a "click" event. But, as described later in this chapter, you will frequently associate an event type with an element by what is called an event handler that corresponds to the event. An event handler adopts the event name and appends the word "on" in front of it. Thus, a button element knows to do something with a click event because it has an onclick event handler associated with the button.
Capitalization of event handler names is another fuzzy subject. When used as HTML tag attributes, event handler names are case-insensitive. A tradition among long-time scripters has been to capitalize the first letter of the event type, as in onClick. XHTML validation, however, requires all lowercase letters for event handler attributes, as in onclick. In other situations, you can assign an event handler as a property of an object. In this case, the event handler property name must be all lowercase to be compatible across platforms (because scripted items, such as property and method names, are case-sensitive in JavaScript). The trend, therefore, is toward all lowercase event handler attribute names in tags—the format used throughout this book.
It is not uncommon to hear someone call an event handler an event. There is a fine distinction between the two, but you won't be arrested by the jargon police if you say "the onclick event." It is more important that you understand the range of events available for a particular browser version and what user or system action fires the event in the first place.
Table 6-1 is a summary of all the event handlers that are implemented in common for the IE 4 and W3C DOMs. Most of these event handlers are part of the HTML and XHTML recommendations, and will validate as lowercase attributes for elements in XHTML-Strict. A handful of other event handlers are not part of the formal standards, but have been available in scriptable browsers since the early days. See Chapter 10 for complete details about each event type.
|
Event handler |
NN |
IE/Win |
IE/Mac |
HTML |
Description |
|---|---|---|---|---|---|
| onabort |
3 |
4 |
3.01 |
n/a |
The user has interrupted the transfer of an image to the client |
| onblur |
2 |
3 |
3.01 |
4 |
An element has lost the input focus because the user clicked out of the element or pressed the Tab key |
| onchange |
2 |
3 |
3.01 |
4 |
An element has lost focus and the content of the element has changed since it gained focus |
| onclick |
2 |
3 |
3.01 |
4 |
The user has pressed and released a mouse button (or keyboard equivalent) on an element |
| ondblclick |
4 |
4 |
3.01 |
4 |
The user has double-clicked a mouse button on an element |
| onerror |
3 |
4 |
4 |
n/a |
An error has occurred in a script or during the loading of some external data |
| onfocus |
2 |
3 |
3.01 |
4 |
An element has received the input focus |
| onkeydown |
4 |
4 |
4 |
4 |
The user has begun pressing a keyboard character key |
| onkeypress |
4 |
4 |
4 |
4 |
The user has pressed and released a keyboard character key |
| onkeyup |
4 |
4 |
4 |
4 |
The user has released a keyboard character key |
| onload |
2 |
3 |
3.01 |
4 |
A document or other external element has completed downloading all data into the browser |
| onmousedown |
4 |
4 |
4 |
4 |
The user has begun pressing a mouse button |
| onmousemove |
4 |
4 |
4 |
4 |
The user has rolled the mouse (irrespective of mouse button state) |
| onmouseout |
3 |
3 |
3.01 |
4 |
The user has rolled the mouse out of an element |
| onmouseover |
2 |
3 |
3.01 |
4 |
The user has rolled the mouse atop an element |
| onmouseup |
4 |
4 |
4 |
4 |
The user has released the mouse button |
| onmove |
4 |
3 |
4 |
n/a |
The user has moved the browser window |
| onreset |
3 |
4 |
4 |
4 |
The user has clicked a Reset button in a form |
| onresize |
4 |
4 |
4 |
n/a |
The user has resized a window or object |
| onselect |
2 |
3 |
3 |
4 |
The user is selecting text in an input or textarea element |
| onsubmit |
2 |
3 |
3.01 |
4 |
A form is about to be submitted |
| onunload |
2 |
3 |
3.01 |
4 |
A document is about to be unloaded from a window or frame |
Beyond the cross-browser events in Table 6-1, Microsoft implements an additional set that allows DHTML scripts to react to more specific user and system actions. Table 6-2 lists the IE-only events that may assist a DHTML application. Pay special attention to the columns that show in which version of each browser the particular event handler was introduced. Many of these events are available only in the Windows version of IE. Not listed in Table 6-2 are the many event handlers that apply only to Internet Explorer's data binding facilities, which allow form elements to be bound to server database sources. Bear in mind, however, that an event handler introduced in one browser version may have been extended to other objects in a later browser version. Chapter 10 provides implementation details on all available events.
|
Event handler |
IE/Win |
IE/Mac |
Description |
|---|---|---|---|
| onbeforecopy |
5 |
n/a |
The user has issued a Copy command, but the operation has not yet begun |
| onbeforecut |
5 |
n/a |
The user has issued a Cut command, but the operation has not yet begun |
| onbeforepaste |
5 |
n/a |
The user has issued a Paste command, but the operation has not yet begun |
| onbeforeprint |
5 |
n/a |
The user has issued a Print command, but the document has not yet been sent to the printer |
| oncontextmenu |
5 |
n/a |
The user has pressed the context menu ("right click") mouse button |
| oncopy |
5 |
n/a |
The user has initiated a Copy command, but the operation has not yet begun |
| oncut |
5 |
n/a |
The user has issued a Cut command, but the operation has not yet begun |
| ondrag |
5 |
n/a |
The user is dragging the element |
| ondragend |
5 |
n/a |
The user has completed dragging the element |
| ondragenter |
5 |
n/a |
The user has dragged an element into the space of the current element |
| ondragleave |
5 |
n/a |
The user has dragged an element out of the space of the current element |
| ondragover |
5 |
n/a |
The user is dragging an element through the space of the current element |
| ondrop |
5 |
n/a |
The user has dropped a dragged element atop the current element |
| onfocusin |
6 |
n/a |
The user has acted to give focus to the element, but the actual focus has not yet occurred |
| onfocusout |
6 |
n/a |
The user has given focus to another element |
| onhelp |
4 |
4 |
The user has pressed the F1 key or chosen Help from the browser menu |
| onmouseenter |
5.5 |
n/a |
The user has moved the cursor into the space of the element |
| onmouseleave |
5.5 |
n/a |
The user has moved the cursor to outside the space of the element |
| onmousewheel |
6 |
n/a |
The user is rolling the mouse wheel |
| onmoveend |
5.5 |
n/a |
A positioned element has completed its motion |
| onmovestart |
5.5 |
n/a |
A positioned element is starting its motion |
| onpaste |
5 |
n/a |
The user has issued a Paste command, but the operation has not yet begun |
| onscroll |
4 |
4 |
The user has adjusted an element's scrollbar |
| onselectstart |
4 |
4 |
The user is beginning to select an element |
|  | |
| 5.11. Combining Forces: A Custom Newsletter |  | 6.2. Event Objects |
Copyright © 2003 O'Reilly & Associates. All rights reserved.