home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

Chapter 6. Scripting Events

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.

6.1. Event Types

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.

Table 6-1. Event handlers for all DHTML browsers

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.

Table 6-2. Internet Explorer DHTML 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



Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.