Professional JavaScript | 32 | WebReference

Professional JavaScript | 32

current pageTo page 2To page 3

Professional JavaScript

Mainstream Browser Event Models

Web browsers were originally designed to display plain HTML and that was all. Handling of user input via HTML intrinsic events is a more recent innovation. Client-side languages like JavaScript came after HTML, and for earlier browsers it shows. It is only with advent of the 4.0 browsers that event handling mechanisms are organized in a general and flexible way.

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 NameAction causing the eventAfter 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.
onError Bad JavaScript script or bad image in Netscape. Interpreting of the script / loading of the image stops; error message.
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.
onLoad HTML document or an image finishes loading. All of the document/image is now readable. All JavaScript script has loaded.
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.
onUnload Window closed or new URL navigated to by any means. All HTML objects and JavaScript scripts in the page are wiped away.

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:

<INPUT TYPE=text ONCHANGE="this.value=this.value.toUpperCase(); return true;">
<INPUT TYPE=text ONCHANGE="this.value=this.value.toLowerCase(); return true;">

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 Name3.0 handlers that might fireUser 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.


current pageTo page 2To page 3

Created: April 4, 2001
Revised: April 4, 2001