	JavaScript Programmer's Reference
Prev	Home	Up		Next

Event names (Definition)

Rules for naming event handlers.

When you specify the name of an event as an HTML tag attribute, because tag attributes in HTML are case insensitive, you only have to spell the event name correctly. You can type it in any mixture of upper and lower case and the browser should still be able to associate it with the correct fragment of JavaScript. These are all equally valid:

<INPUT TYPE="text" ONCHANGE="handleEvent();">
<INPUT TYPE="text" onchange="handleEvent();">
<INPUT TYPE="text" onChange="handleEvent();">
<INPUT TYPE="text" OnChAnGe="handleEvent();">

It is conventional to do it like this:

<INPUT TYPE="text" onChange="handleEvent();">

Inside the JavaScript interpreter, you can associate handlers using properties. However the event names must be correctly cased in that situation; they would be lower case. You don't need to put the onChange tag attribute in, because you are registering the error handler inside the script block, like this:

   <HTML>

   <BODY>

   <FORM NAME="the_form">

   <INPUT TYPE="text" NAME="the_text">

   </FORM>

   <SCRIPT>

   document.the_form.the_text.onchange=alert("Changed");

   </SCRIPT>

   </BODY>

   </HTML>

Here is a list of all event names although they don't all apply to every object in the document.

Event	Handler	Usage
Abort	`onabort`	When image loading is aborted.
AfterPrint	`onafterprint`	When printing has just finished.
AfterUpdate	`onafterupdate`	When an update is completed.
Back	`onback`	The user has clicked on the [BACK] button in the toolbar.
BeforeCopy	`onbeforecopy`	Immediately before a copy to the clipboard.
BeforeCut	`onbeforecut`	Immediately before a cut to the clipboard.
BeforeEditFocus	`onbeforeeditfocus`	Immediately before the edit focus is directed to an element.
BeforePaste	`onbeforepaste`	Immediately before the clipboard is pasted.
BeforePrint	`onbeforeprint`	Immediately before printing begins.
BeforeUnload	`onbeforeunload`	Called immediately prior to the window being unloaded.
BeforeUpdate	`onbeforeupdate`	Called immediately before an update commences.
Blur	`onblur`	When an input element loses input focus.
Bounce	`onbounce`	Triggered when a marquee element hits the edge of its element area.
Change	`onchange`	When edit fields have new values entered or a popup has a new selection, this event's handler can check the new value.
Click	`onclick`	When the user clicks the mouse button on the `Element` object that represents the object on screen.
ContextMenu	`oncontextmenu`	Special handling for contextual menus.
Copy	`oncopy`	When a copy operation happens.
Cut	`oncut`	When a cut operation happens.
DataAvailable	`ondataavailable`	Some data has arrived asynchronously from an applet or data source.
DataSetChanged	`ondatasetchanged`	A data source has changed the content or some initial data is now ready for collection.
DataSetComplete	`ondatasetcomplete`	There is no more data to be transmitted from the data source.
DblClick	`ondblclick`	When the user double-clicks on an object.
Drag	`ondrag`	When a drag operation happens.
DragDrop	`ondragdrop`	Some data has been dropped onto a window.
DragEnd	`ondragend`	When a drag ends.
DragEnter	`ondragenter`	When a dragged item enters the element.
DragLeave	`ondragleave`	When a dragged item leaves the element.
DragOver	`ondragover`	While the dragged item is over the element.
DragStart	`ondragstart`	The user has commenced some data selection with a mouse drag.
Drop	`ondrop`	When a dragged item is dropped.
Error	`onerror`	Triggered if an error occurs when loading an image.
ErrorUpdate	`onerrorupdate`	An error has occurred in the transfer of some data from a data source.
FilterChange	`onfilterchange`	A filter has changed the state of an element or a transition has just been completed.
Finish	`onfinish`	A marquee object has finished looping.
Focus	`onfocus`	When the form element is selected for entry.
Forward	`onforward`	The user has clicked on the [FORWARD] button in the toolba.r
Help	`onhelp`	The user has pressed the [F1] key or selected [help] from the toolbar or menu.
KeyDown	`onkeydown`	When a key is pressed.
KeyPress	`onkeypress`	Pressing the key down and releasing it again elicits this event.
KeyUp	`onkeyup`	When a key is released.
Load	`onload`	When an object has completed loading.
LoseCapture	`onlosecapture`	When an element loses event capturing permission.
MouseDown	`onmousedown`	When the mouse button is pressed.
MouseDrag	`onmousedrag`	An event handler for mouse drag operations.
MouseMove	`onmousemove`	When the mouse pointer is moved.
MouseOut	`onmouseout`	When the mouse pointer leaves the active area occupied by the `Element` object that represents the object on screen.
MouseOver	`onmouseover`	When the mouse pointer enters the active area owned by the object.
MouseUp	`onmouseup`	When the mouse button is released.
Move	`onmove`	The browser window has been moved.
Paste	`onpaste`	When a paste operation happens.
PropertyChange	`onpropertychange`	When an object property is modified (similar to the Netscape Navigator `watch()` method).
ReadyStateChange	`onreadystatechange`	An object in the window has changed its ready state.
Reset	`onreset`	The user has clicked a reset button in a form.
Resize	`onresize`	As the window is resized, this event is triggered.
RowEnter	`onrowenter`	The data in a field bound to a data source is about to be changed.
RowExit	`onrowexit`	The data in a field bound to a data source has been changed.
Scroll	`onscroll`	The window has been scrolled.
Select	`onselect`	Some textual content in the window has been selected.
SelectStart	`onselectstart`	A select action is beginning.
Start	`onstart`	A marquee element is beginning its loop.
Stop	`onstop`	When a stop action occurs.
Submit	`onsubmit`	The user has clicked on the submit button in a form.
Unload	`onunload`	Triggered when the document is unloaded.

In the topics that describe the events, the intercap (capitalised word breaks) form is used so that the event name reads more easily.

Warnings:

Netscape version 4.0 allows event name properties to have some uppercase characters. For example, a portable script would set the onchange property. A non-portable script that only worked in Netscape would set the onChange property. It is probably best to avoid using this if you want your scripts to run as widely as possible.
Not all versions of the browsers support the assignment of handlers to object properties. This depends on the object type, browser version and probably the phase of the moon.

See also: Event, Event handler, Event model, Keyboard events, Window.releaseEvents()

Prev	Home	Next
Event model	Up	Event object
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions.