★ wanayoo — archive 1999 http://wdvl.internet.com/Authoring/JavaScript/Events/

Events in JavaScript: An Inside Look

February 15,1999

Events are the glue which hold together the word inter-active. In learning to control and handle events you bridge the gap between a two-dimensional web page and a three-dimensional one; a web page which is one step closer to an application, offering the visitor opportunity to touch, feel, and mold the page rather than simply stare at it.

In this article we look closely at events, what they are, how to handle them with JavaScript, and how they differ -- in some cases significantly -- between the fourth generation versions of Netscape Navigator and Microsoft Internet Explorer. A follow up article will look at changes to events in the upcoming fifth generation browsers. This inside look at events requires at least a basic familiarity with JavaScript.

Event History

JavaScript was introduced to make it easier for web pages to "process"; that is, rather than merely display static information, JavaScript could be used to perform calculations, output results to the page, and so on. Typically, this power is best employed when triggered by the user who is, after all, the primary agent in a Web page. Events, then, became an essential tool for linking the user to the page.

A very simple example is a Click event. You may have written some JavaScript code which calculates a subtotal of purchase prices based on user selections. A key factor, though, is when does this code execute? A very basic question indeed. Logically, the code would execute when the user told it to, somehow. It is no great stretch to imagine a web page which sports a "Calculate Total" button. The calculation code, then, should be triggered when the user clicks the "Total" button.

Clicking the button, then, is an event. In fact, it is an event named "Click"! A whole category of events was defined based on actions that the user might take; for instance, the Change event will trigger when the user selects an item in a drop down menu (a select object) or the Submit event triggers when the user submits a form. Each event applies to certain elements on the page and some events could apply to multiple elements: the Change event only applies to a drop down menu but the Click event applies to a button and a hyperlink.

Not all events need be triggered by the user's actions, though. Some events, such as Load, are triggered by happenings within the browser itself; the latter, for instance, triggers when the Web page has completed downloading into the browser.

In all, a set of events was defined and applied to certain elements on the page. By the release of Netscape Navigator 3 and Internet Explorer 3 these events were well defined and implemented in JavaScript. The fourth generation release of the Big Two browsers introduced a deep rift, the approach and philosophy of events diverging in conceptually incompatible ways.

Now, then, we begin our look at using events with JavaScript in the fourth generation browsers. As indicated in the introduction, a follow up article shall focus on yet more enhancements to the event models in the soon-to-be-released fifth generation of Internet Explorer and Netscape Navigator.