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.
Events in JavaScript: An Inside Look
The Document Object Model
|
