Section VI.1. Event Types


VI.1. Event Types

Events have been scriptable since the earliest scriptable browsers. The number and granularity of events have 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 click, mouseover, keypress, and load 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 various browser classes. By far the biggest group of browser-specific events belongs to IE 5 and latermost of those implemented 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, you can associate an event type with an element by way of an attribute inside and HTML tag or a scriptable property of the element object. By convention (and standards), the attribute and property associated with an event 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 actionan event handler functionassigned by way of an onclick event handler attribute or scripted property. As you'll see, these aren't the only ways to assign event functions to events, but they are the ways that are completely backward compatible to even the earliest scriptable browsers.

You will likely encounter plenty of existing code that assigns event handler functions to events via attributes in HTML tags. Even though this approach runs counter to the modern practice of removing behaviorial items from markup, the "old fashioned" way of doing it continues to be supported by the newest browsers. A tradition among early scripters was to capitalize the first letter of the event type, as in onClick. XHTML validation, however, requires all lowercase letters for event attributes, as in onclick.

In other situations, you can assign an event as a property of an object. In this case, the event 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 attribute names in tags if you choose to make assignments in that fashionthe format used throughout this writing for some demonstrations.

Table VI-1 is a summary of all the events that are implemented in common for the IE 4, old Netscape Navigator, and W3C DOMs (the W3C DOM picks up HTML 4 events). Numbers in the browser columns (Netscape Navigator, Internet Explorer for Windows, and Internet Explorer for Macintosh) indicate the version in which the event was first supported. Most of these events are part of the HTML and XHTML recommendations, and will validate as lowercase attributes for elements in XHTML-Strict. A handful of other events are not part of the formal standards, but have been available in scriptable browsers since the early days. See Chapter 3 of Dynamic HTML, Third Edition for complete details about each event type.

Table VI-1. Events for all DHTML browsers

Event

NN

IE/Win

IE/Mac

HTML

Description

abort

3

4

3.01

n/a

The user has interrupted the transfer of an image to the client

blur

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

change

2

3

3.01

4

An element has lost focus and the content of the element has changed since it gained focus

click

2

3

3.01

4

The user has pressed and released a mouse button (or keyboard equivalent) on an element

dblclick

4

4

3.01

4

The user has double-clicked a mouse button on an element

error

3

4

4

n/a

An error has occurred in a script or during the loading of some external data

focus

2

3

3.01

4

An element has received the input focus

keydown

4

4

4

4

The user has begun pressing a keyboard character key

keypress

4

4

4

4

The user has pressed and released a keyboard character key

keyup

4

4

4

4

The user has released a keyboard character key

load

2

3

3.01

4

A document or other external element has completed downloading all data into the browser

mousedown

4

4

4

4

The user has begun pressing a mouse button

mousemove

4

4

4

4

The user has rolled the mouse (irrespective of mouse button state)

mouseout

3

3

3.01

4

The user has rolled the mouse out of an element

mouseover

2

3

3.01

4

The user has rolled the mouse atop an element

mouseup

4

4

4

4

The user has released the mouse button

move

4

3

4

n/a

The user has moved the browser window

reset

3

4

4

4

The user has clicked a Reset button in a form

resize

4

4

4

n/a

The user has resized a window or object

select

2

3

3

4

The user is selecting text in an input or textarea element

submit

2

3

3.01

4

A form is about to be submitted

unload

2

3

3.01

4

A document is about to be unloaded from a window or frame


Beyond the cross-browser events in Table VI-1, Microsoft implements an additional set that allows DHTML scripts to react to more specific user and system actions. Table VI-2 lists the IE-only events that may assist a DHTML application (Safari implements some of these events, too). Pay special attention to the columns that show in which version of each browser the particular event was introduced. Many of these events are available only in the Windows version of IE. Not listed in Table VI-2 are the many events 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 introduced with a limited range of elements in one browser version may have been extended to other objects in a later browser version. Chapter 3 of Dynamic HTML, Third Edition provides implementation details on all available events.

Table VI-2. Internet Explorer DHTML events

Event

IE/Win

IE/Mac

Description

afterprint

5

n/a

The browser has completed sending the document to the printer (or for print preview)

beforecopy

5

n/a

The user has issued a Copy command, but the operation has not yet begun

beforecut

5

n/a

The user has issued a Cut command, but the operation has not yet begun

beforepaste

5

n/a

The user has issued a Paste command, but the operation has not yet begun

beforeprint

5

n/a

The user has issued a Print command, but the document has not yet been sent to the printer

contextmenu

5

n/a

The user has pressed the context menu ("right click") mouse button

copy

5

n/a

The user has initiated a Copy command, but the operation has not yet begun

cut

5

n/a

The user has issued a Cut command, but the operation has not yet begun

drag

5

n/a

The user is dragging the element

dragend

5

n/a

The user has completed dragging the element

dragenter

5

n/a

The user has dragged an element into the space of the current element

dragleave

5

n/a

The user has dragged an element out of the space of the current element

dragover

5

n/a

The user is dragging an element through the space of the current element

drop

5

n/a

The user has dropped a dragged element atop the current element

focusin

6

n/a

The user has acted to give focus to the element, but the actual focus has not yet occurred

focusout

6

n/a

The user has given focus to another element

help

4

4

The user has pressed the F1 key or chosen Help from the browser menu

mouseenter

5.5

n/a

The user has moved the cursor into the space of the element

mouseleave

5.5

n/a

The user has moved the cursor to outside the space of the element

mousewheel

6

n/a

The user is rolling the mouse wheel

moveend

5.5

n/a

A positioned element has completed its motion

movestart

5.5

n/a

A positioned element is starting its motion

paste

5

n/a

The user has issued a Paste command, but the operation has not yet begun

propertychange

5

n/a

A script has changed the property of the element

readystatechange

5

n/a

The state of an element that loads external data has changed

scroll

4

4

The user has adjusted an element's scrollbar

selectstart

4

4

The user is beginning to select an element





Dynamic HTML. The Definitive Reference
Dynamic HTML: The Definitive Reference
ISBN: 0596527403
EAN: 2147483647
Year: 2004
Pages: 120
Authors: Danny Goodman

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net