Mainstream Browser Event Models
Microsoft and Netscape use different capitalization for event handler names. We're using the Netscape version here. Just convert to all-lowercase for the Microsoft equivalent.
The Good Old Days That Weren't So Good
In the simplest model for events, an event occurs, a handler fires and when it completes, then the event is over. Possibly the browser might do something afterwards. This is broadly how Netscape and Microsoft 3.0 browsers work. It's worth looking at these old browsers first, because the number of events in the version 4+ browsers are quite overwhelming. The events that appeared at the 3.0 level are the ones needed for the simplest and commonest scripting tasks, so they're a good place to start before diving in more deeply. Here is a list of those events:
|Event Name||Action causing the event||After effect when event finishes|
|onAbort||User stops a page loading before an image in the page is complete.||Image cannot be fully displayed.|
|onBlur||Move the cursor from a text field or select list, click a different form element or raise a different browser window.||Input focus moves to the other window or form element.|
|onChange||Fill-in field or select menu item is changed and user then goes to another field.||Field or menu has a new value, field no longer has the input focus.|
|onClick||Click a hypertext link or any button-like object in a form, and this event fires.||Any action attached to the button occurs, e.g. form submission, form reset, or in the case of a link, navigation to a new URL.|
|onFocus||As for onBlur, except the event occurs on the thing moved to.||As for onBlur. In the case of a text field it is now ready for user input.|
|onMouseOut||Mouse pointer moves over a link.||Status bar updates.|
|onMouseOver||Mouse pointer moves off a link.||Status bar resets.|
|onReset||Reset-style form button clicked.||Form's elements are unset.|
|onSubmit||Submit-style form button clicked.||Form is submitted; web page is replaced.|
These events, especially the ones that have to do with forms are very straightforward. If you have a modern browser, version 4.0+ then you can learn a great deal quite quickly just experimenting with these events. Try playing with this page:
<HTML><BODY><FORM> <INPUT TYPE=text ONCHANGE="this.value=this.value.toUpperCase(); return true;"> <BR> <INPUT TYPE=text ONCHANGE="this.value=this.value.toLowerCase(); return true;"> </FORM></BODY></HTML>
However, even for the older version 3.0 browsers, the simple table shown is not really sufficient. This second table shows that for some events, more than one handler of the same type might fire:
|Event Name||3.0 handlers that might fire||User action that fires multiple handlers|
|onBlur||Frame, window, text and password fields.||Click on a different frame or window.|
|onError||Frame, window, image. (NC3 only)||Load a document containing a bad image.|
|onFocus||Frame, window, text and password fields.||Click on a field in a different frame.
Click on a field or frame in a different window.
|onLoad||Frame, window, image.||Load a document or frameset.|
|onReset||Reset button, form. (NC3 only)||Clear a form.|
|onSubmit.||Submit button, form.(NC3 only)||Submit a form.|
For these browsers there is little you can do to control this behavior, except avoid using specific combinations of handlers. Chapter 7 on Forms and Data and Chapter 17 on Debugging collect some wisdom on how to manage these events. The Appendices list every event by object.
If the situation is nontrivial for version 3.0 browsers, it follows that if more events or more features are added to the browser, something has to happen to give more control to the scriptwriter.
Created: April 4, 2001
Revised: April 4, 2001