JavaScript Tutorial >> JavaScript Events.

Now JavaScript Tutorial will guide us that JavaScript event is something that happens, e.g. a mouse click on a button, an image that has loaded. JavaScript Events usually occur as a result of human interaction with the browser, and what action performed by the visitors that will be handle or capture by the JavaScript Events, e.g. selecting a document to load, validating form information, mouse activities and so many events.

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 JavaScript Event handler that displays an alert message when the submit button will be click.

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

► onAbort - The user aborts the loading of an image
► onBlur - HTML  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 can be capture by this event handler.
► onDblClick - user double-clicks a form element or a link event handler.
► onDragDrop - user drops an object e.g. file onto the browser window.
► onError - loading of a document or image causes an error event handler.
► onFocus - window, frame, frameset or form element receives focus.
► onKeyDown - user depresses a key event handler.
► onKeyPress - user presses or holds down a key event handler.
► onKeyUp - user releases a key event handler.
► onLoad - browser finishes loading a window or all of the frames within a frameset.
► onMouseDown - user depresses a mouse button event handler.
► onMouseMove - user moves the cursor event handler.
► onMouseOut - cursor leaves an area or link by mouse movement event handler.
► onMouseOver - cursor moves over an object or area event handler.
► onMouseUp - user releases a mouse button event handler.
► onMove - user or JavaScript moves a window or frame event handler.
► onReset - user resets a form event handler.
► onResize - user or JavaScript resizes a window or frame.
► onSelect - user selects some of the text within a text or textarea field.
► onSubmit - user submits a form event handler.
► onUnload - user exits a document event handler.

JavaScript 1.0 is supported by Netscape Navigator 2.0 browser and partially by Microsoft Internet Explorer 3.0 web browser, details of event handler in JavaScript 1.0 is as under with object name end event handler name.
 

Object Name in JavaScript 1.0	Event Handlers Names in JavaScript 1.0
button	onBlur()1, onClick(), onFocus()1
checkbox	onBlur()1, onClick(), onFocus()1
fileupload	onBlur(), 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 only, the onBlur() and onFocus() JavaScript event handlers are only invoked for the text entry elements: text, textarea, password and fileupload objects. 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() JavaScript event handler cannot cancel the form being reset. 5 In Navigator 2.0 for Windows platforms, the onChange() JavaScript event handler is not invoked immediately after a select option is chosen in an HTML Form. 6 In Navigator 2.0 the submit onClick() JavaScript event handler cannot cancel the form submission.

JavaScript 1.1 is supported by Netscape Navigator 3.0 browser and partially by Microsoft Internet Explorer 3.0 web browser, details of JavaScript 1.1 Events Handler are as under.
 

Object Names in JavaScript 1.1	Event Handlers Names in JavaScript 1.1
area	onClick()2, onMouseOut(), onMouseOver()
button	onBlur()1, onClick(), onFocus()1
checkbox	onBlur()1, onClick(), onFocus()1
fileupload	onBlur(), onChange(), onFocus()
form	onReset(), onSubmit()
frame	onLoad(), onUnload()
image3	onAbort()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() JavaScript event handlers are only invoked for the text entry elements: text, textarea, password and fileupload objects. 2 In Navigator 3.0 for Windows platforms, the onClick() JavaScript 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() JavaScript event handlers are not supported.

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

Object Names in JavaScript 1.2	Event Handlers Names in JavaScript 1.2
area	onDblClick(), onMouseOut(), onMouseOver()
button	onBlur(), onClick(), onFocus(), onMousedown(), onMouseup()
checkbox	onBlur(), onClick(), onFocus()
document	onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseUp()
fileupload	onBlur(), 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()

►onAbort Event Object Example
►onBlur Event Object Example
►onChange Event Object Example
►onClick Event Object Example
►onError Event Object Example
►onFocus Event Object Example
►onLoad Event Object Example
►onMouseOut Event Object Example
►onMouseOver Event Object Example
►onReset Event Object Example
►onSelect Event Object Example
►onSubmit Event Object Example
►onUnload Event Object Example
►Opening a child window that controls parent window using onClick
►Opening a child window that controls parent window using onMouseOver