Professional JavaScript | 32
  [next] |
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 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. |
| 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:
<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.
Contents |
|
[next] |
Created: April 4, 2001
Revised: April 4, 2001
