WebReference.com - Part 1 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (1/5).

[next]

Dynamic HTML: The Definitive Reference, 2E. Chapter 6: Scripting Events

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

[next]

Created: August 29, 2002
Revised: August 29, 2002

URL: http://webreference.com/programming/javascript/dhtmlref/chap6/1/