Java Reference
In-Depth Information
DOM and Events
The two major browsers in the late 1990s were Internet Explorer 4 and Netscape 4 — the fi rst browser
war. Not surprising, both browser vendors implemented vastly different DOMs and event models, frag-
menting the web into two groups: websites that catered to Netscape only, and websites that catered to
IE only. Very few developers chose the frustrating task of cross-browser development.
Obviously, a need for a standard grew from this fragmentation and frustration. So the W3C introduced
the DOM standard, which grew into DOM level 2, which included a standard event model.
The DOM event model is a way of handling events and providing information about these events to the
script. It provides a set of guidelines for a standard way of determining what generated an event, what
type of event it was, and when and where the event occurred. It introduces a basic set of objects, proper-
ties, and methods, and makes some important distinctions.
Despite this attempt at standardization, developers still have to work with multiple event models.
While browsers like Firefox, Chrome, Safari, and Opera implement the standard event model, Internet
Explorer does not, and extra effort is required to build cross-browser event-driven applications. Don't
fret, though; despite the different implementations, the DOM and IE event models share some common
properties, and many non-shared properties are easily translated to other properties.
In this section, you'll learn about the two models. Later in the chapter, you'll put this information to use
in writing cross-browser DHTML.
DOM Event Handling
The DOM standard describes an
Event
object, which provides information about the element that has
generated an event and enables you to retrieve it in script. If you want to make it available in script, it
must be passed as a parameter to the function connected to the event handler.
Internet Explorer does not implement the DOM event model. The code in this section will not work in
IE because of this.
Accessing the Event Object
You learned in Chapter 6 how to handle events using HTML attributes. However, you did not learn
how to access an
Event
object, something that proves very useful a majority of the time. It's very simple
to do so, and all you have to do is query the event object created by the individual element that raised
the event. For example, in the following code the
<p/>
element will raise a
dblclick
event:
<p ondblclick=”handle(event)”>Paragraph</p>
<script type=”text/javascript”>
function handle(e)
{
alert(e.type);
}
</script>
Notice that
event
is passed to the
handle()
function in the
ondblclick
attribute. This
event
variable is
special in that it is not defi ned anywhere; instead, it is an argument used only with event handlers that are
connected through HTML attributes. It passes a reference to the current event object when the event fi res.
