Untitled Document

Event Handling in JavaScript
by K. Yue, revised: September 29, 2000
copyright 2000

Introduction

Events are usually caused by user interaction with the document and its contents.
Events can also be raised by the runtime system.
Events are captured by event handlers.
Event handlers execute JavaScript code, including the calling of functions.
An event handler name consists of the event name, preceded by the preposition on.

Example:

For the events Click, Change and MouseOver, the event handlers are onClick, onChange and onMouseOver respectively.

An event handler of an HTML element is added as an extra attribute of the HTML element.

Example:

Note that the keyword this refers to the current object, the evalute button.
The property this.form refers to the form containing the button, that is, document.myForm.

Example: eval.html

<head>
<script>

</script>
</head>

<body>
<form>
Enter an expression:
<input type="text" name="expr" size="15"
       onChange="compute(this.form)">
<input type="button" value="Calculate" onClick="compute(this.form)">
<br>
Result:

<input type="text" name="result" size="15">
</form>
</body>

From JavaScript 1.1 and on, event handlers were elevated to read/write properties of objects.
Dynamic assignments of event handlers are thus possible.

Example:

document.myForm.myButton.onclick=updateSomething;

Built-in objects and their event handler properties are given below (from Netscape's site):

Event	Applies to	Occurs when	Event handler
Abort	images	User aborts the loading of an image (for example by clicking a link or clicking the Stop button)	onAbort
Blur	windows and all form elements	User removes input focus from window or form element	onBlur
Change	text fields, textareas, select lists	User changes value of element	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	User clicks form element or link	onClick
DragDrop	windows	User drops an object onto the browser window, such as dropping a file on the browser window	onDragDrop
Error	images, windows	The loading of a document or image causes an error	onError
Focus	windows and all form elements	User gives input focus to window or form element	onFocus
KeyDown	documents, images, links, text areas	User depresses a key	onKeyDown
KeyPress	documents, images, links, text areas	User presses or holds down a key	onKeyPress
KeyUp	documents, images, links, text areas	User releases a key	onKeyUp
Load	document body	User loads the page in the Navigator	onLoad
MouseDown	documents, buttons, links	User depresses a mouse button	onMouseDown
MouseMove	nothing by default	User moves the cursor	onMouseMove
MouseOut	areas, links	User moves cursor out of a client-side image map or link	onMouseOut
MouseOver	links	User moves cursor over a link	onMouseOver
MouseUp	documents, buttons, links	User releases a mouse button	onMouseUp
Move	windows	User or script moves a window	onMove
Reset	forms	User resets a form (clicks a Reset button)	onReset
Resize	windows	User or script resizes a window	onResize
Select	text fields, textareas	User selects form element's input field	onSelect
Submit	forms	User submits a form	onSubmit
Unload	document body	User exits the page	onUnload

The event object contains properties that describe a JavaScript event, and is passed as an argument to an event handler when the event occurs.

Example:

In a mousedown event, the event object contains

the type of event (in this case "mousedown"),
the x and y position of the cursor at the time of the event,
a number representing the mouse button used, and
a field containing the modifier keys (Control, Alt, Meta, or Shift) that were depressed at the time of the event.

The properties of the event objects are given below.

Property Description
data
Returns an array of strings containing the URLs of the dropped objects. Passed with the DragDrop event.

height
Represents the height of the window or frame.

layerX
Number specifying either the object width when passed with the resize event, or the cursor's horizontal position in pixels relative to the layer in which the event occurred. Note that layerX is synonymous with x.

layerY
Number specifying either the object height when passed with the resize event, or the cursor's vertical position in pixels relative to the layer in which the event occurred. Note that layerY is synonymous with y.

modifiers
String specifying the modifier keys associated with a mouse or key event. Modifier key values are: ALT_MASK, CONTROL_MASK, SHIFT_MASK, and META_MASK.

pageX
Number specifying the cursor's horizontal position in pixels, relative to the page.

pageY
Number specifying the cursor's vertical position in pixels relative to the page.

screenX
Number specifying the cursor's horizontal position in pixels, relative to the screen.

screenY
Number specifying the cursor's vertical position in pixels, relative to the screen.

target
String representing the object to which the event was originally sent. (All events)

type
String representing the event type. (All events)

which
Number specifying either the mouse button that was pressed or the ASCII value of a pressed key. For a mouse, 1 is the left button, 2 is the middle button, and 3 is the right button.

width
Represents the width of the window or frame.

x
Synonym for layerX.

y
Synonym for layerY.

Property	Description
`data`	Returns an array of strings containing the URLs of the dropped objects. Passed with the DragDrop event.
`height`	Represents the height of the window or frame.
`layerX`	Number specifying either the object width when passed with the resize event, or the cursor's horizontal position in pixels relative to the layer in which the event occurred. Note that `layerX` is synonymous with x.
`layerY`	Number specifying either the object height when passed with the resize event, or the cursor's vertical position in pixels relative to the layer in which the event occurred. Note that `layerY` is synonymous with y.
`modifiers`	String specifying the modifier keys associated with a mouse or key event. Modifier key values are: ALT_MASK, CONTROL_MASK, SHIFT_MASK, and META_MASK.
`pageX`	Number specifying the cursor's horizontal position in pixels, relative to the page.
`pageY`	Number specifying the cursor's vertical position in pixels relative to the page.
`screenX`	Number specifying the cursor's horizontal position in pixels, relative to the screen.
`screenY`	Number specifying the cursor's vertical position in pixels, relative to the screen.
`target`	String representing the object to which the event was originally sent. (All events)
`type`	String representing the event type. (All events)
`which`	Number specifying either the mouse button that was pressed or the ASCII value of a pressed key. For a mouse, 1 is the left button, 2 is the middle button, and 3 is the right button.
`width`	Represents the width of the window or frame.
`x`	Synonym for `layerX`.
`y`	Synonym for `layerY`.

Example: MouseDown.html

JavaScript 1.2 allows a Window or Document object to capture and handle an event before it reaches its intended target.
This is the reverse of the event handling model of Java.
To accomplish this, the Window, document, and Layer objects have these new methods:
- captureEvents
- releaseEvents
- routeEvent
- handleEvent (Not a method of the Layer object)
To capture event in the Window or document object:
Call the captureEvents method to set up for the capturing. For example:

window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP);

Define and register an event handler method for the target event for the Window or document object. An example:

function clickHander(e){
// the event object will be passed as the actual
// argument of e.
...
}
window.onClick = clickHandler;

The event handler can return one of the following values:
- true: In the case of a link, the link is followed and no other event handler is checked.
- false. In the case of a link, the link is not followed.
- routeEvent: JavaScript looks for other event handlers for the event. If another object is attempting to capture the event (such as the document), JavaScript calls its event handler. If no other object is attempting to capture the event, JavaScript looks for an event handler for the event's original target (such as a button). The routeEvent method returns the value returned by the event handler. The capturing object can look at this return value and decide how to proceed.
- Call the handleEvent method of an event receiver: Any object that can register event handlers is an event receiver. This method explicitly calls the event handler of the event receiver and bypasses the capturing hierarchy.

Example:

function clickHandler(e) { return true; }
...
//    Let the object in the event handling hierarchy
//    to handle the event.
function clickHandler(e){
    var retval = routeEvent(e);
    return retval;
}

Example:

If you wanted all click events to go to the first link on the page, you could use:

function clickHandler(evnt) {
window.document.links[0].handleEvent(evnt);
}

As long as the link has an onClick handler, the link handles any click event it receives.

Example: EmailCheck.html

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body bgcolor="#9999ff">
<form>
Your email address please:
<input type="text" name="email" size="40" VALUE=""        onChange="emailCheck(this);"><br>
Other input<INPUT TYPE="txt" Name="others" SIZE=40>
<br>
<input type="submit" name="email submit" VALUE="Submit">
</form>
</body>
</html>

Example: NumberInteger.html

<html>
<head>
<script language="JavaScript">

</script>
</head>
<body bgcolor="#9999ff">
<form>
Please input an integer:
<input type="text" NAME="number" size="40" value=""        onChange="integerCheck(this.value);"><br>
Other input:<input type="txt" name="others" size="40">
<br>
<input type="submit">
</body>
</html>