Event Handling
Here is the source code for a simple web
form containing some Javascript that:
- detects the onBlur event in a field
- pops up an alert dialog
Events
are things the user does.
Most of your Javascript programming will serve to handle events.
Javascript can detect a variety of events:
- onAbort
- onBlur
- onChange
- onClick
- onDblClick
- onDragDrop
- onError
- onFocus
|
- onKeyDown
- onKeyPress
- onKeyUp
- onLoad
- onMouseDown
- onMouseMove
- onMouseOut
- onMouseOver
|
- onMouseUp
- onMove
- onReset
- onResize
- onSelect
- onSubmit
- onUnload
|
 |
Lab
Your task:
- Make a copy of the example form.
- Edit it as follows.
- Delete the onBlur event handler.
- Add a button (an <input> tag with type=button) to
the form.
- Pop up an alert when the button's pushed.
- That is, detect the onClick event.
- Open your modified form in your browser and test it.
Solution
Don't peek unless you're stuck!
Extra for Experts
Here's a web page with some Javascript that handles another kind of event: onKeyDown.
Observe:
- It doesn't behave identically in Internet Explorer and Netscape.
- The event handler is defined in the <body> tag.
- A keyCode is a character value (Unicode in Internet Explorer,
ASCII in Netscape Navigator) that is returned when a keyboard event
occurs. To convert the keyCode to alphanumeric, use this syntax:
var charCode = String.fromCharCode(window.event.keyCode);
