The Navigator Event Model: The Event Object - Doc JavaScript

The Event Object

In JavaScript 1.2 (Navigator 4.0x and above) every event (that's right, "event," not "event handler") is also an object whose properties define the characteristics of that event. That is, each event is associated with an event object, which provides information about the event, such as the type of event, and the exact position of the mouse pointer when it occurred.

Each event's event object exists immediately after the event occurs. It is automatically passed to the event processing function as an argument, provided that you take the property assignment approach. In other words, if you assign a function to an object's event handler by way of a simple assignment statement, the event object is automatically handed to the function as a single argument. On the other hand, if you specify the event handler as an attribute of an HTML tag, you must explicity hand the object to the function. Use its standard event (lowercase "e") reference to do that. Take a look at the following example:

<A HREF="https://www.netscape.com/"
   onClick="alert('This link got an event: ' + event.type)">
Netscape</A>

This link generates an alert dialog box, which displays the type of event that triggered it (click). Notice the event reference in the event handler script.

You've probably noticed the use of the e parameter in our event processing functions in this column. Although you can choose a different name, this is a common practice among scripters. In fact, you don't even need to specify a parameter if the function doesn't utilize the event's event object. The following code segments are equivalent:

<!-- first segment -->
<A HREF="https://www.netscape.com/"
   onClick="alert('This link got an event: ' + event.type)">
Netscape</A>

<!-- second segment -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayLinkEvent(e) {
  alert("This link got an event: " + e.type);
}
// -->
</SCRIPT>
<A HREF="https://www.netscape.com/"
   onClick="displayLinkEvent(event)">
Netscape</A>

<!-- second segment -->
<A HREF="https://www.netscape.com/">Netscape</A>
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayLinkEvent(e) {
  alert("This link got an event: " + e.type);
}
document.links[0].onclick = displayLinkEvent;
// -->
</SCRIPT>

Notice that the event handler attribute (second segment) must explicitly pass the Event object by way of the event keyword as an argument. The event keyword is similar to the this keyword in many ways. For example, you can pass one of its properties to the function, instead of sending the entire object:

<SCRIPT LANGUAGE="JavaScript">
<!--
function displayLinkEvent(eventType) {
  alert("This link got an event: " + eventType);
}
// -->
</SCRIPT>
<A HREF="https://www.netscape.com/"
   onClick="displayLinkEvent(event.type)">
Netscape</A>

This kind of property pre-extraction is not possible with the property assignment approach, because the entire event object is passed to the function as an argument. Another advantage of the attribute approach is that you can hand several arguments to a function when an event occurs. Here's an example:

<SCRIPT LANGUAGE="JavaScript">
<!--
function processLink(eventType, eventModifiers) {
  ...
}
// -->
</SCRIPT>
<A HREF="https://www.netscape.com/"
   onClick="processLink(event.type, event.modifiers)">
Netscape</A>

This is obviously not possible with the property assignment approach because it invokes the event processing function with one argument -- the event object.

Don't worry about the browser compatibility issues. We'll nail them down in our next column.

Created: December 16, 1997
Revised: December 16, 1997

URL: https://www.webreference.com/js/column9/eventhobject.html