Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Man-Handling Events #3

Man-Handling Events #2

Man-Handling Events #1

Events and Event Handlers

You are here: irt.org | Articles | JavaScript | Events | Events and Event Handlers [ previous next ]

Published on: Friday 9th January 1998 By: Martin Webb

Introduction

This article will describe JavaScript Events and Event Handlers, explaining what they are and what we can do with them. It also includes a complete list of the events supported in each release of JavaScript.

Events

An event is something that happens, e.g. a mouse click on a button, an image that has loaded. Events usually occur as a result of human interaction with the browser, e.g. selecting a document to load, entering form information.

Event Handlers

Event handlers are JavaScript methods, i.e. functions of objects, that allow us as JavaScript programmers to control what happens when events occur.

For example, the following form has an onSubmit event handler that displays an alert message: 

<FORM NAME="formName" onSubmit="alert('Form submitted')">
<INPUT TYPE="SUBMIT">
</FORM>

The onSubmit event handler can be invoked in two instances, by the user pressing the submit button, or by another JavaScript submitting the form, e.g. 

document.formName.submit();

JavaScript event handlers have 'on' before the event name, e.g. onClick, onSubmit, onLoad, onFocus.

In JavaScript 1.1 it is possible to retrieve the event handlers contents, but the whole event handler must be in lower case, e.g. onsubmit: 

document.write(document.formName.onsubmit);

It is also possible to set the contents of the event handler: 

document.formName.onsubmit = 'function onsubmit(event) { alert("Changed"); }' ;

The complete list of Event Handlers:

  • onAbort - The user aborts the loading of an image
  • onBlur - form element loses focus or when a window or frame loses focus.
  • onChange - select, text, or textarea field loses focus and its value has been modified.
  • onClick - object on a form is clicked.
  • onDblClick - user double-clicks a form element or a link.
  • onDragDrop - user drops an object (e.g. file) onto the browser window.
  • onError - loading of a document or image causes an error.
  • onFocus - window, frame, frameset or form element receives focus.
  • onKeyDown - user depresses a key.
  • onKeyPress - user presses or holds down a key.
  • onKeyUp - user releases a key.
  • onLoad - browser finishes loading a window or all of the frames within a frameset.
  • onMouseDown - user depresses a mouse button.
  • onMouseMove - user moves the cursor.
  • onMouseOut - cursor leaves an area or link.
  • onMouseOver - cursor moves over an object or area.
  • onMouseUp - user releases a mouse button.
  • onMove - user or script moves a window or frame.
  • onReset - user resets a form.
  • onResize - user or script resizes a window or frame.
  • onSelect - user selects some of the text within a text or textarea field.
  • onSubmit - user submits a form.
  • onUnload - user exits a document.

JavaScript 1.0

JavaScript 1.0 is supported by Netscape Navigator 2.0 and partially by Microsoft Internet Explorer 3.0.

ObjectEvent Handlers
button onBlur()1, onClick(), onFocus()1
checkbox onBlur()1, onClick(), onFocus()1
fileuploadonBlur(), onChange()2, onFocus()
form onSubmit()
link onClick(), onMouseOver()
password onBlur(), onChange()3, onFocus()
radio onBlur()1, onClick(), onFocus()1
reset onBlur()1, onClick()4, onFocus()1
select onBlur()1, onChange()5, onFocus()1
submit onBlur()1, onClick()6, onFocus()1
text onBlur(), onChange(), onFocus()
textarea onBlur(), onChange(), onFocus()
window onLoad(), onUnload()

1 In Navigator 2.0 for Unix platforms, the onBlur() and onFocus() event handlers are only invoked for the text entry elements: text, textarea, password and fileupload.

2 In Navigator 2.0 the fileupload input is hidden from JavaScript, so onChange() is limited.

3 In Navigator 2.0 the password input is hidden from JavaScript, so onChange() is limited.

4 In Navigator 2.0 the reset onClick() event handler cannot cancel the form being reset.

5 In Navigator 2.0 for Windows platforms, the onChange() event handler is not invoked immediately after a select option is chosen.

6 In Navigator 2.0 the submit onClick() event handler cannot cancel the form submission.

JavaScript 1.1

JavaScript 1.1 is supported by Netscape Navigator 3.0 and partially by Microsoft Internet Explorer 3.0.

ObjectEvent Handlers
area onClick()2, onMouseOut(), onMouseOver()
button onBlur()1, onClick(), onFocus()1
checkbox onBlur()1, onClick(), onFocus()1
fileuploadonBlur(), onChange(), onFocus()
form onReset(), onSubmit()
frame onLoad(), onUnload()
image3onAbort()3, onError()3, onLoad()3
link onClick()2, onMouseOut(), onMouseOver()
password onBlur(), onChange(), onFocus()
radio onBlur()1, onClick(), onFocus()1
reset onBlur()1, onClick(), onFocus()1
select onBlur()1, onChange(), onFocus()1
submit onBlur()1, onClick(), onFocus()1
text onBlur(), onChange(), onFocus()
textarea onBlur(), onChange(), onFocus()
window onBlur()4, onError()4, onFocus()4, onLoad(), onUnload()

1 In Navigator 3.0 for Unix platforms, the onBlur() and onFocus() event handlers are only invoked for the text entry elements: text, textarea, password and fileupload.

2 In Navigator 3.0 for Windows platforms, the onClick() event handler is not supported by the area object.

3 In Explorer 3.0 the image object is not supported.

4 In Explorer 3.0 the window objects onBlur(), onError() and onFocus() event handlers are not supported.

JavaScript 1.2

JavaScript 1.2 is supported by Netscape Navigator 4.0. Although Microsoft Internet Explorer appears to support JavaScript 1.2, it actually implements a different Dynamic Object Model which will not be descibed here.

ObjectEvent Handlers
area onDblClick(), onMouseOut(), onMouseOver()
button onBlur(), onClick(), onFocus(), onMousedown(), onMouseup()
checkbox onBlur(), onClick(), onFocus()
document onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseUp()
fileuploadonBlur(), onChange(), onFocus()
form onReset(), onSubmit()
frame onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize(), onUnload()
image onAbort(), onError(), onKeyDown(), onKeyPress(), onKeyUp(), onLoad()
layer onMouseOver(), onMouseOut(), onLoad(), onFocus(), onBlur()
link onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseOut(), onMouseUp(), onMouseOver()
password onBlur(), onFocus()
radio onBlur(), onClick(), onFocus()
reset onBlur(), onClick(), onFocus()
select onBlur(), onChange(), onFocus()
submit onBlur(), onClick(), onFocus()
text onBlur(), onChange(), onFocus(), onSelect()
textarea onBlur(), onChange(), onFocus(), onKeyDown(), onKeyPress(), onKeyUp(), onSelect()
window onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize() onUnload()

Summary

As you can see there is only a small subset of Event Handlers (i.e. JavaScript 1.0) that is supported by all JavaScript enabled browsers. And amongst those there are bugs and or unsupported features. Knowing these 'features' makes the difference between a casual JavaScript programmer and an expert.

To find out more information on JavaScript Event Handlers read the online JavaScript documentation:

Netscape Navigator 4.0 - http://developer.netscape.com/library/documentation/communicator/jsref/index.htm

Microsoft Internet Explorer 4.0 - http://www.microsoft.com/JScript/us/techinfo/jsdocs.htm

Related items

Man-Handling Events #3

Man-Handling Events #2

Man-Handling Events #1

Feedback on 'Events and Event Handlers'

©2018 Martin Webb