Standard Events
NOTE : Certain events detailed here are supported by some versions of Netscape and older versions of Internet Explorer for certain HTML elements (see the particular element for browser specific details). To use browser v4.0 specific scripting, ensure your target audience is using the required browser, or they've been re-directed appropriately.

Contents: onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart

onclick
Unsurprisingly, the onclick event can be used to execute script functions when the user clicks on the particular element. Internet Explorer 4.0 supports this event for almost all HTML elements, while Netscape and earlier versions of Internet Explorer only support it in a handful of elements (such as links, image map 'hot-spots' etc). See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondblclick
The ondblclick event occurs when the user double-clicks on the particular element (almost all elements for Internet Explorer 4.0, link, document and area objects (see <A>, Document Object and <AREA> for details) for Communicator). For example, the following link does not respond to single-clicking in the normal fashion, but double-clicking navigates to the new document. This event handler is Internet Explorer 4.0 and above and Netscape 4.0 and above specific. Netscape 3.0 fully supports the onclick event and would 'kill' the link when single-clicking, but doesn't support the ondblclick event, so essentially, to Netscape 3.0 users, the link would be totally dead. Internet Explorer 3.0x users would receive a scripting error, as Internet Explorer 3.0 doesn't support the link 'killing' method.

<A HREF="other_page.htm" onclick="javascript:return false" ondblclick="self.location.href ='other_page.htm'">Link text</A>

Give it a try (note that the link won't navigate anywhere, even on double-clicking, but will present a message for the purposes of the example).

Link text

Note that the system mouse settings are used to determine the difference between a single and double-click - as a HTML author, you have no method for setting what counts as a double-click. See the onmouse* event ordering section for details of the order in which mouse related events occur.

ondragstart
Whenever the user focuses on an element or a text selection and attempts to drag it somewhere different in the document, the ondragstart event is fired. As a simple example, the following link text will change when the link is dragged.

Give it a try: Drag me

NOTE : For the purposes of this example, the default action of the dragging procedure has been cancelled. The normal action would be to load the document referenced in the link on top of all documents currently displayed, which would 'break' the HTMLib display. This means that the 'dragging' cursor (the normal pointer, with a 'shortcut' attachment) will not be seen when dragging the example.

onfilterchange
Whenever a Filter applied to an element is changing, it fires an onfilterchange event. The srcFilter property of the Event Object can be used to obtain a reference to the exact filter object that is causing the event to occur.

onhelp
The onhelp event is used to execute script functions when the user presses the 'F1' key. Note that for the event to be fired from an object, the object must currently have the focus (i.e. the user has 'tabbed' to the link, or clicked on it). It could be used for example, to open a new window, containing user-assistance on the current document, or the specific element. As a simple example, the following link only responds to double-clicking (see ondblclick above), so provides a 'help' message to the confused user who is single-clicking it (provided they press the F1 key after single-clicking the link produced no response).

<A HREF="other_page.htm" LANGUAGE="Javascript" onclick="return false" onhelp="alert ('Double-click this link to view the target document');return false" ondblclick="self.location.href= 'other_page.htm'">Link text</A>

Give it a try : Link text

Note the use of the return false keyword in the onhelp event handler, to cancel the default action of the event. Internet Explorer 4.0's default action on pressing the 'F1' key (firing the onhelp event is to bring up the Internet Explorer help file. Using return false in the event handler prevents this happening.

onkeydown
The onkeydown event can be used (in conjunction with the event object) to determine whether the user is holding down any keys when the referenced element has the current users focus. By using the keyCode and altKey, ctrlKey and shiftKey properties of the event object it's possible to determine any key combination that the user may be using when the element has the focus. Note : The onkeydown event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeypress
The onkeypress event is similar to the onkeydown event (described above), except that it returns the UNICODE value of the key or keys being pressed when the event occurs. This allows for case-sensitivity detection when using the shift key in conjunction with other keys. For example, the onkeydown event is fired by pressing the 'Alt', 'Ctrl', or 'Shift' keys and the keyCode property of the event object returns the corresponding code, whereas the onkeypress event isn't. If the onkeypress event is used instead, then the 'Alt', 'Ctrl' and 'Shift' keys can be combined with other keys to fire the event. I.e. 'Shift+S' (returning the keyCode value for a capital 'S') can be separated from 's' (returning the keyCode value for a lower case s). Note : The onkeypress event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onkeyup
The onkeyup event is fired when a previously pressed key is released while the referenced element has the focus. It returns the same keyCode property as the onkeydown event would. Note : The onkeyup event is supported by Netscape Communicator for the document, image, link and textarea objects (see the relevant Document Object, <IMG>, <A> and <TEXTAREA> topics)

onmousedown
The onmousedown event fires whenever the user presses a button on the mouse, with the event being initially fired for the element that has the focus when the mouse button is clicked, and bubbling up through the element objects until an onmousedown event handler is found. (Note : Initial versions of the Internet Client SDK detailed the onmousedown event as having various arguments for detecting keystates and the mouse button pressed etc. - these have since been removed from the event declaration, as they're supported through the Event Object for all events that occur).
See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape Communicator supports the onmousedown event for button, document and link objects - see <INPUT>, Document Object and <A> topics)

onmousemove
The onmousemove event occurs whenever the users mouse moves over a document (essentially, it is continually firing). onmousemove event handlers can be written for almost any element (for Internet Explorer 4.0 - Netscape 4.0 only supports it for the Document Object and Window Object), which will then handle the onmousemove events for whenever the mouse moves over the referenced elements only. Note that nested onmousemove events should cancel the bubbling of the event in order to work properly. For example, consider:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM'">italicised</EM> text</P>

The status bar will imply that the mouse is only ever moving over the <P> element contents, as the event bubbles from the <EM> element, when the mouse moves over it, causing both onmouseover events to fire. However:

<P onmousemove="top.status='Over the P'">Here's some <EM onmousemove="top.status='Over the EM';self.event.cancelBubble=true">italicised</EM> text</P>

Try it, the second line cancels the event bubbling

Here's some italicised text

Here's some italicised text

would cancel the bubbling and the two distinct status bar messages will be seen.
See the onmousedown event for details of the correct argument list order and values of the mouse button and key states.

onmouseout
The onmouseout event fires when the users mouse leaves the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/ <ILAYER> and <A>)

onmouseover
The onmouseover event fires when the users mouse enters the area defined by the referenced element. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for area, layer and link objects. See <AREA>, <LAYER>/ <ILAYER> and <A>)

onmouseup
The onmouseup event can be used to execute script functions after the users mouse has been pressed and released - the opposite of the onmousedown event in effect. See the onmouse* event ordering section for details of the order in which mouse related events occur. Note : Netscape supports the onmouseout event for button, document and link objects. See <INPUT>, Document Object and <A>)

onselectstart
The onselectstart event is fired whenever the users starts to select some text that is the contents of the referenced element. For example, selecting any of the text in the white paragraph below causes it to change its style (fairly drastically) :

onmouse* event ordering
During mouse events for which there is no button interaction (i.e. no clicking of either mouse buttons), the events occur in the following order:

onmouseover
onmousemove
onmouseout

So, any script functions executed by the onmouseover event will occur first, followed by those attached to the onmousemove event, followed by those attached to the onmouseout event.

For mouse events that also entail 'clicking' of the mouse, the event order changes to:

onmouseover
onmousemove
onmousedown
onmouseup
onclick
ondblclick
onmouseout

so any script functions executed by onmousedown or onmouseup events would occur before the onclick or ondblclick events.

© 1995-1998, Stephen Le Hunte

Questions:

Comments:

Code: