on ... (Event handler)

All event handlers begin with the word on.

The event handlers are many and various in their support across the browsers and in the way that they are triggered. There is no one object that supports them all and even when an object does not support them by default, the event-management capabilities of MSIE or Netscape can sometimes set objects up to support them anyway.

Here is a summary of the available supported events:

AbortonabortWhen image loading is aborted.
AfterPrintonafterprintWhen printing has just finished.
AfterUpdateonafterupdateWhen an update is completed.
BackonbackThe user has clicked on the [BACK] button in the toolbar.
BeforeCopyonbeforecopyImmediately before a copy to the clipboard.
BeforeCutonbeforecutImmediately before a cut to the clipboard.
BeforeEditFocusonbeforeeditfocusImmediately before the edit focus is directed to an element.
BeforePasteonbeforepasteImmediately before the clipboard is pasted.
BeforePrintonbeforeprintImmediately before printing begins.
BeforeUnloadonbeforeunloadCalled immediately prior to the window being unloaded.
BeforeUpdateonbeforeupdateCalled immediately before an update commences.
BluronblurWhen an input element loses input focus.
BounceonbounceTriggered when a marquee element hits the edge of its element area.
ChangeonchangeWhen edit fields have new values entered or a popup has a new selection, this event's handler can check the new value.
ClickonclickWhen the user clicks the mouse button on the Element object that represents the object on screen.
ContextMenuoncontextmenuSpecial handling for contextual menus.
CopyoncopyWhen a copy operation happens.
CutoncutWhen a cut operation happens.
DataAvailableondataavailableSome data has arrived asynchronously from an applet or data source.
DataSetChangedondatasetchangedA data source has changed the content or some initial data is now ready for collection.
DataSetCompleteondatasetcompleteThere is no more data to be transmitted from the data source.
DblClickondblclickWhen the user double-clicks on an object.
DragondragWhen a drag operation happens.
DragDropondragdropSome data has been dropped onto a window.
DragEndondragendWhen a drag ends.
DragEnterondragenterWhen a dragged item enters the element.
DragLeaveondragleaveWhen a dragged item leaves the element.
DragOverondragoverWhile the dragged item is over the element.
DragStartondragstartThe user has commenced some data selection with a mouse drag.
DropondropWhen a dragged item is dropped.
ErroronerrorTriggered if an error occurs when loading an image.
ErrorUpdateonerrorupdateAn error has occurred in the transfer of some data from a data source.
FilterChangeonfilterchangeA filter has changed the state of an element or a transition has just been completed.
FinishonfinishA marquee object has finished looping.
FocusonfocusWhen the form element is selected for entry.
ForwardonforwardThe user has clicked on the [FORWARD] button in the toolbar.
HelponhelpThe user has pressed the [F1] key or selected [help] from the toolbar or menu.
KeyDownonkeydownWhen a key is pressed.
KeyPressonkeypressPressing the key down and releasing it again elicits this event.
KeyUponkeyupWhen a key is released.
LoadonloadWhen an object has completed loading.
LoseCaptureonlosecaptureWhen an element loses event capturing permission.
MouseDownonmousedownWhen the mouse button is pressed.
MouseDragonmousedragAn event handler for mouse drag operations.
MouseMoveonmousemoveWhen the mouse pointer is moved.
MouseOutonmouseoutWhen the mouse pointer leaves the active area occupied by the Element object that represents the object on screen.
MouseOveronmouseoverWhen the mouse pointer enters the active area owned by the object.
MouseUponmouseupWhen the mouse button is released.
MoveonmoveThe browser window has been moved.
PasteonpasteWhen a paste operation happens.
PropertyChangeonpropertychangeWhen an object property is modified (similar to the Netscape watch() method).
ReadyStateChangeonreadystatechangeAn object in the window has changed its ready state.
ResetonresetThe user has clicked a reset button in a form.
ResizeonresizeAs the window is resized, this event is triggered.
RowEnteronrowenterThe data in a field bound to a data source is about to be changed.
RowExitonrowexitThe data in a field bound to a data source has been changed.
ScrollonscrollThe window has been scrolled.
SelectonselectSome textual content in the window has been selected.
SelectStartonselectstartA select action is beginning.
StartonstartA marquee element is beginning its loop.
StoponstopWhen a stop action occurs.
SubmitonsubmitThe user has clicked on the submit button in a form.
UnloadonunloadTriggered when the document is unloaded.

Events are associated with HTML tags by means of the onEvent="..." tag attribute. This assigns a function object to the onevent property of the Element object that represents a tag. Event handlers can be associated with objects by assigning function object references to the event handler properties of the objects. However, this is also not consistently supported across the browsers.

Netscape supports event routing calls that can send events to objects by passing the Event object to them. The objects then map the events to an appropriate handler according to their set up.

The initial value of this property will be an anonymous function whose body contains the contents of the onEvent="..." HTML tag attribute.

When the event is triggered and called, it will execute in the context of the Element object and not the window. This means the execution scope will be that of the Element object.

In Netscape prior to version 6.0, event handlers are passed an event object as an argument when they are called. In MSIE, no object is passed but the equivalent event object is available as the event property of the window that contains the Element object that receives the event trigger.

On the return from a handler, other processing may take place. In pre-version 6.0 Netscape browsers, the general technique for this is to return a false value. Returning nothing is equivalent to returning true, which may allow some default processing in the browser to be called. In MSIE, this flag value is also supported, at least on later browser versions. In addition, the returnValue property of the event object can be set to false.

Now with the version 6.0 release of Netscape the DOM level 2 event model has been introduced. The event model is still undergoing some development at the W3C standards organisation and a level 3 update is available for review. This at least is a turning point for event handling because all browser manufacturers have stated that it is their goal to be standards-compliant. The new event model is mainly based on the MSIE way of doing things but it is a slightly hybrid and takes some ideas from the Netscape tradition too.


See also:Element.onevent, Event object