The Event Object

Both fourth generation browsers introduced a new player onto the event handling stage: the event object. An object, as you may know, is a construct which possesses properties and methods which reflect data linked to a particular theme. For instance, the document object possesses properties which reflect characteristics of the open document, such as its URL, its background color, its title, and so on. An object also possesses "methods" which are functions that execute a particular task; the window object, for example, sports the close() method, which closes the window, and the open() method, which spawns a new window.

The event object, then, contains information about the event. Which event? The event which has just happened!

Put another way, the event object is a snapshot of details surrounding an event immediately after it has happened. You can use the event object in the event handler code to gain insight into details of the event such as where the mouse pointer was when the event took place, whether certain keyboard keys such as Shift and Ctrl were depressed at the time, and so on.

For an example, let's consider the MouseOver event. This event occurs when the mouse pointer passes over the target element. The MouseOver event handler can be applied to the <A> tag.

<a 
 href="somepage.html" 
 onClick="return someFunction();" 
 onMouseOver="someFunction2();">

Within the event handler we can access the event object. Imagine, then, that you want a snapshot of the screen coordinates of the mouse pointer the moment it has passed over the target hyperlink and triggered the event. You could send two of the event object's properties -- screenX and screenY -- as parameters to someFunction2(), which then presumably uses these values for some purpose.

<a 
 href="somepage.html" 
 onClick="return someFunction();" 
 onMouseOver="someFunction2(event.screenX,event.screenY);">
 

If you need access to the event object from within a function called by the event handler you can pass the entire object as a parameter:

<a 
 href="somepage.html" 
 onClick="return someFunction();" 
 onMouseOver="someFunction2(event);">

The function, then, would receive a copy of this object as an incoming parameter:

function someFunction2(evt)
{ coordX=evt.screenX; coordY=evt.screenY }

As you can see in the fictional someFunction2(), you can then probe the properties of the cloned event object.

A Fork in the Road

Thus far we have surveyed the basic handling of events using tag-specified event handlers and probing characteristics of the event by way of the event object. You may have noticed, though, that we've been cagey about specifics -- for instance, just which elements can have which event handlers. And what properties are supported by the event object?

Truth is, we're not out to deceive or give you the runaround. The fact of the matter is that it is precisely on these matters of specifics where the Big Two browsers fail to meet on common ground. We must now think about how Navigator and Internet Explorer differ from one another.

Event Handler Basics
Events in JavaScript: An Inside Look
Defining Event Handlers: Variations