home / programming / javascript / professional / chap4 / 4

Professional JavaScript

Developer News

Microsoft Shows Off Silverlight 4, IE9 Plans

Metasploit Expands Vulnerability Test Framework

HyperCard Reborn?

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

home / programming / javascript / professional / chap4 / 4

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Whitepapers and eBooks

Microsoft Articles: Visual Studio 2010
Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Microsoft Whitepaper: How Windows Server 2008 R2 Helps Optimize IT and Save You Money
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips
SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
Video: Deploy Applications on Windows Azure
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Download: Microsoft Visual Studio 2010 Beta 2
Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Get the Windows 7 SDK

Free Trial: Red Gate SQL Backup Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
All About Botnets

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com

Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions

Sitemap · Experts · Tools · Services · Email a Colleague · Contact

FREE Newsletters >

The latest from internet.com

Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

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

URL: http://webreference.com/programming/javascript/professional/chap4/4/