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).
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) :
Selecting any of this text will cause it to change its colours...sometimes wildly |
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:
file: /Techref/language/html/ib/Dynamic_HTML/dhtmle.htm, 21KB, , updated: 2008/11/16 07:04, local time: 2024/11/3 18:46,
98.84.25.165:LOG IN ©2024 PLEASE DON'T RIP! THIS SITE CLOSES OCT 28, 2024 SO LONG AND THANKS FOR ALL THE FISH!
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://techref.massmind.org/techref/language/html/ib/Dynamic_HTML/dhtmle.htm"> Dynamic HTML standard Events</A> |
Did you find what you needed? |
Welcome to massmind.org! |
Welcome to techref.massmind.org! |
.